Color Overlay on Hover Image

Color overlay over image on hover

Changing block opacity would also change its content, so you might also try changing alpha channel of the overlay using pseudo elements and rgba() background color

.image1:hover:after {    background-color: rgba(0, 0, 255, 0.3);    content: "";    height: 100%;    position: absolute;    width: 100%;}.image1 {    background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);    display: inline-block;    height: 300px;    margin-left: auto;    position: relative;    vertical-align: top;    width: 300px;}

<div class="image1"></div>

Image inside a link that has a color overlay on hover

I would make the container inline-block so it fits to the size of the image, set the image to vertical-align: top so the white space at the bottom is gone, then use display: flex; align-items: center; justify-content: center; on the overlay container to center it's contents.

.img-overlay img {  position: relative;  vertical-align: top;}
.overlay {  display: none;  position: absolute;  color: #fff;  top: 0;  bottom: 0;  right: 0;  left: 0;  background-color: rgba(41, 42, 44, 0.5);  justify-content: center;  align-items: center;}
.img-overlay {  position: relative;  display: inline-block;}
.img-overlay:hover .overlay {  display: flex;}

<a class="img-overlay">  <img src="https://placehold.it/350x150">  <div class="overlay">    <span>TITLE</span>  </div></a>

How to create a color-overlay on an image?

You can wrap the image tab with a div tag and set the background color with the rgba code for blue [ex. rgba(34, 167, 240, .5)] Set the opacity of the color by changing the last value of the rgba.

<div class="img-overlay">
   <img src="https://images.pexels.com/photos/1093913/pexels-photo-1093913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>

.img-overlay {
  width: 100%;
  height: 100%;
  background: rgba(34, 167, 240, .5);
}

CSS Color overlay hover

Here you go, simply reverse the css http://jsfiddle.net/4fgnd/1226/

.image:before {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:before {
    opacity:1;
}
.image:hover:before {
    opacity:0;
}

---

Related Topics