Question

How can I apply transition only on the links which have images instead of text. For example only in the second link:

<a href="#">no image</a>
<a href="#"><img src="http://i.qkme.me/35rb4r.jpg"></a>

The following CSS will apply transition on all links:

a{   
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

a:hover{
    opacity:0.1;
}

I’ve tried this and doesnt work.

a:hover img{
    opacity:0.1;
}

Here’s jsfiddle: http://jsfiddle.net/wg5b3/

Answer 1

a > img:hover{
    opacity:0.1;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s; 
}