Webkit-Transition not working on image

Question

I have applied:

-webkit-transition:background-image 0.4s ease-in-out;
background-image: url('http://www.clementinekeithroach.co.uk/wpcontent/uploads/2013/09/about.jpg');
background-position:initial initial;
background-repeat:initial initial;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
clear:both;
color:#DDDDDD;
cursor:pointer;
display:block;
font-size:1.8rem;
height:80px;
line-height:80px;
margin:2em auto 0;
text-align:center;
transition:background-image 0.4s ease-in-out;
width:80px;
}

To the "about" image on:

http://www.clementinekeithroach.co.uk/home/

However, unlike all the other images on the site, which fade naturally, and then increase in their darkness when hovered over, this one refused to budge.

Can someone explain where I've gone wrong?

Answer 1

replace your that holds the background for "about" with this code:

remember to remove the background-image attribute from the span's css. Also remove filter and opacity from the span to make this work.

<span class="sidebar-link">
            <img src="http://www.clementinekeithroach.co.uk/wp-content/uploads/2013/09/about.jpg" id="myimg">

<style>
#myimg{
    height: 100%;
    opacity: 0.6;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
    z-index: 1;
}
#myimg:hover{
    height: 100%;
    opacity: 1;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
    z-index: 1;
}
</style>
</span>