Hover image not working

Asked Sep 19 '15 at 22:43

Active Sep 19 '15 at 22:43

Viewed 26 times

I'm trying to get the image to fade to black and to display a + sign in the center on hover but it isn't working.

.block-img img {
width:710px;
margin-bottom:50px;
position:relative;
}

.block-img img:hover:after {
opacity: 1;
}

.block-img img:after {
box-sizing: border-box;
content:"+";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
opacity: 0;
-webkit-transition: opacity 100ms ease-out;
transition: opacity 100ms ease-out;
color: white;
}

http://jsfiddle.net/pbd4chkd/

asked Sep 19 '15 at 22:43

user2252219

just `.block-img img:hover {` – Steven Moseley Sep 19 '15 at 22:45
http://jsfiddle.net/pbd4chkd/2/ <-- the hover action works here... your css needs some tweaking though – Steven Moseley Sep 19 '15 at 22:48
Unfortunately, most browsers do not support using `:after` or `:before` on `img` tags. [See here](http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements). – lmgonzalves Sep 19 '15 at 22:54

Hover image not working

0 Answers0