Mike Bans Mike Bans - 12 days ago 5
HTML Question

:before overlay doesn't cover image when hovered on

So what I want is that when an image is hovered over the black overlay I have added with the :before covers the div and then I will add text and an image over the top of that later. With the current code it doesn't even seem to be recognising the hover. I'm also using foundation. Help would be much appreciated :)

<div class="small-12 large-4 columns">
<img class="tri" src="media/images/mountain.jpg">
</div>



.tri{
position: relative;
overflow: hidden;
display: block;
}

.tri:before{
opacity: 0.8%;
top: 100%;
width: 100%;
height: 100%;
transition: all 0.4s;
background-color: black;
position: absolute;
content: '';

}

.tri:hover::before{
top: 0%;
}

Answer

Unfortunately, ::before and ::after psuedoclasses aren't supported on self-closing elements like img and input.

You could simply wrap an additional div around the img and put the :hover and ::before properties on that.

Comments