Mads I Mads I - 2 months ago 9
CSS Question

:hover style on div with an image that doesnt trigger

I've been trying to make a overlay hover effect on a website with pure css

<div class="col-md-4 port-show">
<img class="img-responsive" alt="" src="">
<h2 class=""></h2>
<ul>
<li></li>
<li></li>
</ul>
</div>


But I've run into the problem when I hover over the img that the overlay will not trigger. I know I have to do it differently, but just don't now how.
CSS:

:hover:after{
content: "";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: red;
border-radius: 6px;
border-color: transparent;
}

Answer

You can look here. Maybe this solution will be helpfull for you.

http://codepen.io/anon/pen/VKmxZw

.img-holder {
  position: relative;
  z-index: 1;
  display: block;
  width: 350px;
}
.img-holder img {
  display: block;
  width: 100%;
}
.img-holder:after {
  content: " ";
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 2;
  left: 0;
  top: 0;
  position: absolute;
  opacity: 0;
}
.img-holder:hover:after {
  opacity: 1;
}
<div class="col-md-4 port-show">
  <span class="img-holder">
    <img src="http://placehold.it/350x150" />
  </span>
  <h2 class=""></h2>
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

Comments