Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Add Black Image Overlay with CSS Transparency

Ashfaq Ahmed by Ashfaq Ahmed
December 24, 2019
in Modal & Popup
0
Add Black Image Overlay with CSS Transparency
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

In this article, I will show you how to add a black transparency black overlay to the image by using the CSS only. I will do that without affecting the text or other overlap elements.

Just to be noted, I will do that by inline the image inside the div but if you want to keep the image as background then you can check out our article Transparent Overlay Background Image.

To apply the transparent overlay to the image, I will use the opacity property which can take a value from 0.0 – 1.0. The lower the value, the more transparent. When the user hovers the image, it will see a nice transparent black background with Icon or text.

Note That: The IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.

Another way, We can use the RGBA colors. If you don’t know then you can simply convert the Hex to RGBA color.

Add Black Image Overlay with CSS Transparency

We have done two overlay effects. Each one wraps up with a div class name resource. The external div resource includes the image and then a div for the overlay. We place the Heading and an Icon

<div class="resource">
<img src="https://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eb2e746fb98cc2510ebd/1459874606989/PsZyN43.png" />
<div id="overlay5">
  <h2 class="img-title">fade in</h2>
  <p class="fa fa-plus-square-o fa-4x img-icon"></p>
</div>
</div>

In your CSS file, you’ll need to set the outer div (resource) to position: relative, while the inner div (overlay5 or overlay8) should be set to position: absolute. The inner div should be configured to top: auto and bottom: 0, with width: 100% and height: 100%.

Once you’ve set these properties, you can customize the color, opacity, transition, etc. You can also add an image to the overlay.

The Style

I originally coded this in purely CSS, and no javascript required. I used the font awesome for icons on hover.

body {
  background: #7a2c2c;
  color: #16a085;
  font-family: 'Oxygen', Arial;
  text-align: center;
}
#title,
#subtitle {
  font-size: 2.5em;
  letter-spacing: .3em;
  color: #16a085;
  margin: 0;
  text-transform: uppercase;
  font-family: 'Bungee', Arial;
}
.container {
  margin: 20px auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.resource {
	color: white;
    display: inline-block;
    height: 250px;
    margin: 4em;
    overflow: hidden;
    position: relative;
    width: 400px;
}
.resource img {
  width: 100%;
  height: 100%;
}
.img-title {
  font-weight: 300;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.img-title,
.img-icon {
  margin: 0;
}
#overlay5 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#overlay8 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.resource:hover img {
  transform: scale(2);
  transition: transform 0.5s;
}
.resource:hover #overlay5 {
  opacity: 1;
}
.resource:hover #overlay8 {
  opacity: 1;
  transform: scale(1);
}
Tags: CSS Overlay
Demo Download
Previous Post

Pure CSS Fullscreen Overlay Menu Without Javascript

Next Post

Simple Image Hover Effects with Captions Text

Next Post
Simple Image Hover Effects with Captions Text

Simple Image Hover Effects with Captions Text

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
Hexagonal CSS Grid

Auto Adjustable Hexagonal CSS Grid

December 17, 2019
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.