0

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?

Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160
Sam Slater
  • 69
  • 1
  • 10
  • provide a jsfiddle please – Fez Vrasta Sep 05 '13 at 13:39
  • 1
    well the diffrence between the "about" image and the others is that it is added in css as background-image. the others are playn elements – Mx. Sep 05 '13 at 13:42
  • 1
    I can clearly see on your website that you are not doing the same. There's a huge difference between the two implementations. One uses color alpha transitions on the parent links, yours uses transitions on background-image and those are not implemented in webkit (http://stackoverflow.com/questions/9483364/css3-background-image-transition) – Sergiu Paraschiv Sep 05 '13 at 13:47
  • Ok, due to some other heirachy thing, I cant actually ass this particular image as anything but a background image, so how would I go about making this same effect appear for a css background image? Cheers, Sam – Sam Slater Sep 05 '13 at 13:53

1 Answers1

0

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>
Mx.
  • 3,588
  • 2
  • 25
  • 33