Add CSS3-transition to child object

Question

So I have a -tag and within it is a div. The div has a background image that appears when hovering. I would like to add a transition to this affect, though I can't get it working.

HTML

<a class="thumbs">
  <div class="thumbsText">
    Some text
  </div>
</a>

CSS:

.thumbsText{
  -webkit-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  -ms-transition: background-image 1s ease-in-out;
  -o-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}

.thumbs a:hover .thumbsText{
  background-image: url(images/shadow.png);
}

`background-image` is not a transitionable or animatable property. You would have to use something else. Also the selector is wrong for the `hover` as the class `thumbs` is on the `a`. — Harry, Sep 22 '14 at 14:20
Ah ok! There's no jQuery to do this? Found this: http://stackoverflow.com/questions/17825194/fade-in-background-jquery — Carl Papworth, Sep 22 '14 at 14:21
I am not much into jQuery mate, so can't comment much on that. Maybe you can add the jQuery tag to the question and then see the response. — Harry, Sep 22 '14 at 14:22
@CarlPapworth possible duplicate: http://stackoverflow.com/questions/9483364/css3-background-image-transition - please use search before asking next time. — easwee, Sep 22 '14 at 14:24
@easwee cheers, kind of threw it out in the heat of the moment :D — Carl Papworth, Sep 22 '14 at 14:27

score 1 · Accepted Answer · answered Sep 22 '14 at 22:48

You can't add a transition to a background-image. What you can do however is set the background image to a :before pseudo-element, and transition the opacity of that element:

.thumbsText {
    position: relative;
}

.thumbsText:before{
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

    background-image: url(http://placekitten.com/150/150);    
    bottom: 0;
    content: ' ';
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.thumbs:hover .thumbsText::before{
    opacity: 1;
}

<a class="thumbs">
   <div class="thumbsText">
      Some text
   </div>
</a>

Also your selector is not entirely correct. You are trying to select a link inside .thumb with your rule (.thumb a:hover), while those are the same element. I removed the a from my selector.

Cool, I'll try that out! No that's true, in my original code the `` is inside a `div.thumb`, I just printed out the example html wrong here :) Thanks for your help! — Carl Papworth, Sep 24 '14 at 06:33

Add CSS3-transition to child object

1 Answers1