On Hover Overlay Image in CSS

Image overlay on hover css issue

The question asks what is the problem with the overlay not overlaying the img.

The basic problem is that the img is within a div which is being used as the overlay, so when the overlay z-index is increased on hover the whole lot 'moves forward' on the z-access so their relative positions on that axis are not changed.

If we separate out the img from the overlay and make sure the overlay stacks over the img then the hover will work.

Here's a simple example, maintaining all the CSS given in the question but separating the overlay element from the containing element. Obviously in the real version the php takes the place of the img element here. img and overlay are given position absolute so they sit in the same place.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .content_overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #FFF;
        rbackground-color:transparent;
    }
    .content_overlay:hover{/* taken out the & and written as pure CSS rather than SCSS/SASS */
            display: block;
            background: rgba(0, 0, 0, .6);
            color: #1f8dd6;
            z-index: 999; /* kept this but not strictly necessary */
    }
    </style>
    </head>
    <body>
    <div <div class="slider-inner pop parentSlider-cell" style="width: 100px; height: 100px; position: relative;"> <!-- given style just for this demo -->
      <img src="" style="width:100%;height:100%;background-color:blue;position:absolute;"/> <!-- using a blue square img element just for this demo -->
      <div class="content_overlay"></div>
    </div>
    </body>
    </html>

Overlay image on hover using only css

Did not have the original image so used an image of my own. See if this helps.

You can also refer to this link: https://jsfiddle.net/askptx0y/

.image:hover {  background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');  background-repeat: no-repeat;  opacity: 1;}img:hover {  opacity: 0.5;}

<div class="image">  <a href="http://www.example.com">    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter">  </a></div>

Background overlay on hover

You are definitely on the right track. Since you are using an :after element for the icon, you should leave that element alone since it's already positioned and defining its own width+height (based off the icon).

The reason the :after selector positions itself correctly is because it's not relying on its parent containers dimensions. You only have it as absolute from the top and left, which is fine. But it doesn't know about how tall it should be, because its parent has no defined height! If you use absolute positioning, you need to define the parent containers dimensions so that the child knows where its bounds are.

So first off, .gallery-icon is already a block element, so you don't need to define its width (its already 100% by nature), just the height:

 .gallery-icon {
    position: relative;
    height: 100%;
 }

Second, you should use a :before element to define a background, so that you don't have to mess with the :after icon:

 &:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #333;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
 }

Now, you just have to add the opacity change on hover!

 &:hover {
    .gallery-icon {
       &:before {
          opacity: .5;
       }
       &:after {
          opacity: 0.6;
       }
    }

Hope that helps, here is a codepen forked off your original: http://codepen.io/anon/pen/JRWqxX

Edit: I also noticed that your img tag is causing it to go below the visual bottom of the container, a quick fix is just to add:

  .gallery-icon {
     img {
        display: block;
     }

CSS Hover : Overlay on image while hovering

Problem: when you show overlay, you are no longer hovering image.

Solution: Apply hover effects when you hover parent, not image itself

.team-member {  margin-bottom: 50px;  text-align: center;}.opacity_box {  width: 100%; /* usually you want to have overlay cover area, so no need for fixed size */  height: 100%;  background: rgba(0, 0, 0, 0.6);  display: none;  position: absolute;  left: 0;  top: 0;  pointer-events: none; /* click-through overlay */}.image-wrapper img {  margin: 0 auto;  -webkit-transition: all 300ms;  -moz-transition: all 300ms;  transition: all 300ms;}.image-wrapper:hover img {  border-radius: 0%;  -webkit-transition: all 300ms;  -moz-transition: all 300ms;  transition: all 300ms;}.image-wrapper:hover .opacity_box {  display: block;}.image-wrapper {  position: relative;  display: inline-block;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div class="team-member">  <div class="image-wrapper">    <img src="https://blackrockdigital.github.io/startbootstrap-agency/img/team/1.jpg" onmouseout="this.src='https://blackrockdigital.github.io/startbootstrap-agency/img/team/1.jpg'" onmouseover="this.src='https://blackrockdigital.github.io/startbootstrap-agency/img/team/2.jpg'"    class="img-responsive img-circle" alt="Sample Image">
    <div class="opacity_box"></div>  </div>
  <h4>Kay Garland</h4>  <p class="text-muted">Lead Designer</p>  <ul class="list-inline social-buttons">    <li><a href="#"><i class="fa fa-twitter"></i></a>    </li>    <li><a href="#"><i class="fa fa-facebook"></i></a>    </li>    <li><a href="#"><i class="fa fa-linkedin"></i></a>    </li>  </ul></div>

Image Hover Overlay - next to each other Horizontally?

Try putting this code on its own html page, to make sure no other styles are affecting it:

<!DOCTYPE html>
<html>
<head>
    <title>Images test</title>
</head>

<style>
.container {
    position: relative;
    width: 33.3333%;
    float: left;
}

.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    opacity: 0.3;
}

.container:hover .middle {
    opacity: 1;
}

.text {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

</style>

<body>

<h2>AUDIO SHOCK</h2>

<div class="container">
  <img src="https://i2.wp.com/factschronicle.com/wp-content/uploads/2017/05/Bose-QuietComfort-35-Best-Wireless-Headphones-2017-min.jpg?fit=640%2C380&ssl=1" alt="Headphones" class="image">
  <div class="middle">
    <div class="text">Product Details</div>
  </div>
</div>

<div class="container">
  <img src="https://static.bhphotovideo.com/explora/sites/default/files/styles/960/public/_shure-aonic-50-wireless-headphones_lifestyle-004-16x9.jpg?itok=GpxHyHuY" alt="Other Headphones" class="image">
  <div class="middle">
    <div class="text">Product Details</div>
  </div>
</div>

<div class="container">
  <img src="https://nonstopnewcomer.com/wp-content/uploads/2017/02/headphones-1149205_640.jpg" alt="Other Headphones" class="image">
  <div class="middle">
    <div class="text">Product Details</div>
  </div>
</div>

</body>
</html>

Make a circular overlay on hover image

I think this is what you want to do: (I only added size in px in your container's CSS to match your image size)

.container {  position: relative;  width: 130px;   /* Modified */  height: 130px;  /* Added */}
.overlay {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  height: 100%;  width: 100%;  border-radius: 100%;  opacity: 0.5;  transition: .5s ease;  background-color: rgb(186, 68, 0);}
.container:hover .overlay {  opacity: 1;}
.text {  color: white;  font-size: 20px;  font-weight: bold;  position: absolute;  top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);  text-align: center;}

<div class="container">  <img src="../assets/images/pathologiessmall.jpeg" width="130" height="130" class="image" />  <div class="overlay">    <div class="text">Hello World</div>  </div></div>