Transitions on pseudo-elements :after and :before not working

Question

I know that it is asked before, but i have a specific problem that i can't seem it to work with the solutions answered in the other questions.

I have a thumbnail image and on top of that a :after play icon to show only on hover that it is a video, but the opacity transition doesn't work for the image only.

Does anyone know a solution?

.play-icon:hover:after {
position:absolute;
cursor: pointer;
top:0; 
left:0;
content:'';
width: 100%;
height: 100%;
background: url("http://www.kiddyjunction.ca/support/images/ilightbox/light-skin/thumb-overlay-play.png");
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;   
z-index: 9999;
}

Here the fiddle

Answer 1

I'm assuming that the <img> is what you want animated here, so add a transition style to that element:

 :hover { text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .play-icon:hover:after { position:absolute; cursor: pointer; top:0; left:0; content:''; width: 100%; height: 100%; background: url("http://www.kiddyjunction.ca/support/images/ilightbox/light-skin/thumb-overlay-play.png"); background-repeat: no-repeat; background-position: center center; background-color: transparent; z-index: 9999; } .thumb-grid { display: block; width: 100%; padding: 0 0 0 0; margin: 5em 0 2.5em 0; list-style-type: none; background-color: transparent; } .thumb-grid:after { content:''; width: 0; display: block; clear: both; } .thumb-grid li { position: relative; cursor: pointer; overflow: hidden; width: 13%; margin: 0 8.75% 0 0; display: block; float: left; padding-bottom: 13%; } .thumb-grid li:nth-child(5n) { margin-right: 0; } .thumb-grid img { position: absolute; left: 0; top: 0; width: 100%; filter: url("data:image/svg+xml;utf8,<svg xmlns=\\'http://www.w3.org/2000/svg\\'><filter id=\\'grayscale\\'><feColorMatrix type=\\'matrix\\' values=\\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .thumb-grid li:hover img { opacity: 0.5; } 

 <ul class="thumb-grid"> <li id="gallery" class="play-icon"> <img src="http://placehold.it/250x250" /> </li> <li> <img src="http://placehold.it/250x250" /> </li> <li> <img src="http://placehold.it/250x250" /> </li> <li> <img src="http://placehold.it/250x250" /> </li> <li> <img src="http://placehold.it/250x250" /> </li> </ul> 

JSFiddle