:hover style on div with an image that doesnt trigger

Question

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;
    }

Don't think you can do an after on an image as it is placing an element at the end (inside) the element and img tags can't have child elements, also as you are positioning the after absolutely, you would have to make the img relative — Pete, Sep 21 '16 at 08:10
@JayGhosh I was trying to hover the div, but when I'm a little too quick and hover over the image, then my hover effect doesn't work. — Mads I, Sep 21 '16 at 09:46
`I'm a little too quick and hover over the image`. That depends on your browser's capability to capture the hover event bro — Jay Ghosh, Sep 21 '16 at 09:51

score 1 · Accepted Answer · edited Sep 21 '16 at 08:21

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>

Thanks! Pete, I believe this might have solved my conundrum :D — Mads I, Sep 21 '16 at 09:44

score -1 · Answer 2 · answered Sep 21 '16 at 07:45

You can follow this and make your overlay effect

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

h2 {
  color: #c55;
  padding: 50px 0;
  text-align: center;
  text-transform: uppercase;
}

.container {
  background: url("http://static.pexels.com/wp-content/uploads/2015/03/fog-forest-haze-4827-524x350.jpeg");
  background-size: cover;
  background-position: center;
  position: relative;
  margin: auto;
  width: 200px;
  height: 200px;
  cursor: pointer;
  overflow: hidden;
}
.container:hover .overlay {
  opacity: 1;
  width: 100%;
  height: 100%;
}
.container:hover .overlay span {
  opacity: 1;
  -webkit-transition: 1.3s ease;
  transition: 1.3s ease;
}
.container .overlay {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  margin: auto;
  width: 0px;
  height: 0px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}
.container .overlay span {
  color: #fff;
  text-align: center;
  position: absolute;
  margin: auto;
  width: 180px;
  height: 30px;
  line-height: 30px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

<h2>Image Overlay Hover Effect</h2>
<div class="container">
  <a href="#">
    <div class="overlay">
      <span>Click to see more...</span>
    </div>
  </a>
</div>

score -1 · Answer 3 · answered Sep 21 '16 at 07:55

Some easy overlay code:

<!DOCTYPE html>
<html >
<head> 
<style type="text/css"> 
  .pic{ width:190px;
   height:190px; opacity: 1; 
   filter: alpha(opacity=100); 
   background: url(http://www.corelangs.com/css/box/img/duck.png) no-repeat; }
   .pic:hover { opacity: 0.3; filter: alpha(opacity=30);}
</style> 
</head> 
<body> 
<div class="pic">
</div> 
</body>
</html>

:hover style on div with an image that doesnt trigger

3 Answers3