I am trying to figure out how to apply a transition effect only on links that have images, rather than text. Specifically, I want the transition effect to be applied only to the second link in the following example:
<a href="#">no image</a>
<a href="#"><img src="http://i.qkme.me/35rb4r.jpg"></a>
The CSS provided applies the transition effect to all links:
a{
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
a:hover{
opacity:0.1;
}
However, when I tried targeting only the image within the links like this, it didn't work:
a:hover img{
opacity:0.1;
}
You can view my attempt here on jsfiddle: http://jsfiddle.net/wg5b3/