Dissolve Between Two Background Images on Hover

[Pamela1991]

Hi all,

This is something that has been making me pull my hair out for the past five hours! I had it working days ago on another div, but then I made some changes to that div of which I thought I still knew how to do... apparently not.

I'm just trying to make one image dissolve into another upon hover, and then dissolve back to the original image when the mouse cursor is moved away.

(This is kind of related to my other resolved thread, except this one has nothing to do with lists.)

I've made a fiddle of my latest progress.

Or if you prefer the CSS:

#home .stripes, #home .stripes:hover a {
    text-indent: -9999px;
    width: 116px;
    height: 128px;
    margin: 50px 0px 0px 56px;
    float:left;
    padding: 0;
    background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
#home .stripes a:hover, #home .stripes a:focus {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    opacity: 0;
}

And the HTML:

<div id="home"><div class="stripes"><a href="index.php">Home</a></div></div>

Does anybody know what is the issue here? Thanks!

- Pam

[MarPlo]

Hy,
Try with this code, replacing yours:

#home .stripes a:hover, #home .stripes:hover a, #home .stripes a:focus {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    opacity: 0;
}

- Added: #home .stripes:hover a .
If not works as you want, maybe you should try with some jQuery.

[Pamela1991]

Hy,
Try with this code, replacing yours:

#home .stripes a:hover, #home .stripes:hover a, #home .stripes a:focus {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    opacity: 0;
}

- Added: #home .stripes:hover a .
If not works as you want, maybe you should try with some jQuery.

Hi MarPlo, thanks for the quick reply. I tried that, but for some reason, when it hovers/transitions, the hovered image still flies to the bottom right. I thought it had to do with the margins, but when I removed the margins and put them in another class, the transition stopped working altogether.

I don't know why this is happening?

[dresden_phoenix]

you have your margin applied to both the wrapper AND the link.
make this a separate declaration : #home .stripes { margin: 50px 0px 0px 56px;}


hope that helps.

[Pamela1991]

you have your margin applied to both the wrapper AND the link.
make this a separate declaration : #home .stripes { margin: 50px 0px 0px 56px;}


hope that helps.

Thanks Dresden! It's always good to see your posts.

That worked, but now what is happening is that the hover-image appears by default, and then when you hover over the image the non-hover image appears briefly and then fades into the hover-image even without moving the mouse away.

Here is the updated fiddle.

[dresden_phoenix]

Looked at this over for a bit. Turns out to be another THOUGHT problem rather than code instead of than have hover image disappear, you could have it hidden and then have it appear.

#home .stripes {
    width: 116px;
	margin: 50px 0px 0px 56px;    
	float:left;    background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
    text-indent: -9999em;
    display: block;
    height: 128px;
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    opacity: 0;
}
#home .stripes a:hover, #home .stripes a:focus {
    opacity: 1;
}

Hope that helps.

[Pamela1991]

Looked at this over for a bit. Turns out to be another THOUGHT problem rather than code instead of than have hover image disappear, you could have it hidden and then have it appear.

#home .stripes {
    width: 116px;
	margin: 50px 0px 0px 56px;    
	float:left;    background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
    text-indent: -9999em;
    display: block;
    height: 128px;
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    opacity: 0;
}
#home .stripes a:hover, #home .stripes a:focus {
    opacity: 1;
}

Hope that helps.

Thanks so much, Dresden! It definitely helps a lot! Having it hidden and then appearing actually makes way more sense than the way I was trying to do it.

One thing that I am not quite understanding, though, is that when I was trying to put text-indent, display, height, width, margin, and float all in #home .stripes instead of .stripes a, it wasn't working. I thought these were all consistent values that would be maintained throughout all three of the class rules, so I can't see why it only works when the aforementioned values are separated as you separated them. It doesn't even work if I put height and width in #home .stripes--width has to be there only, and then height in the next class rule as you have it.

For some reason I am finding this a bit mind-boggling.

What am I missing for it to make full sense to me?

Thanks!

- Pam

[dresden_phoenix]

OK I didnt want to overwhelm, but here is the process behind my ADDITIONAL improvements, as well some extra suggestions.

1) in order to be able to use text-indent the element must be BLOCK LEVEL. By default anchor tags (A) are inline. When you floated the A you were able to use text-indent ( because floated elements BECOME block-level). Of course you dont need to float something JUST so that it becomes block level.. you can declare it directly using display:block. this has a couple of added advantages I'll get to next.
2) a block level element is, by default, the width of it's parent. So with A as a block you don't need to declare it width concurrently with its container anymore.
3) Speaking of which, UNLESS otherwise declared, containers will expand to... well.. contain their descendant elements(padding.. and in most cases margins, tho one has to be careful with margin collapse) so by declaring the height in of the anchor tag ( we can do that when the A tag is displayed as a block and not floated) the container div (.stripes) will expand to match)

ASIDE: When you DO float an element it is taken out of the normal flow.. so the parent element thinks its not even there. So you end up having to do something to clear or contain it some how ( Such as, floating the parent also, or declaring a height.. but that seem convoluted compared to the THOUGHT process I am outlining)
4) now that everything is naturally matching, we really needed the two images ( which is why I got rid of the other background declaration) the rest of the process becomes.. ahem.. transparent. UGH.. sorry couldn't resist.

In short, you could have achieved what you asked by simply incorporating "hiding then appearing" into your code, the rest is just streamlining your style. "Less is more", as they say.

[Pamela1991]

OK I didnt want to overwhelm, but here is the process behind my ADDITIONAL improvements, as well some extra suggestions.

1) in order to be able to use text-indent the element must be BLOCK LEVEL. By default anchor tags (A) are inline. When you floated the A you were able to use text-indent ( because floated elements BECOME block-level). Of course you dont need to float something JUST so that it becomes block level.. you can declare it directly using display:block. this has a couple of added advantages I'll get to next.
2) a block level element is, by default, the width of it's parent. So with A as a block you don't need to declare it width concurrently with its container anymore.
3) Speaking of which, UNLESS otherwise declared, containers will expand to... well.. contain their descendant elements(padding.. and in most cases margins, tho one has to be careful with margin collapse) so by declaring the height in of the anchor tag ( we can do that when the A tag is displayed as a block and not floated) the container div (.stripes) will expand to match)

ASIDE: When you DO float an element it is taken out of the normal flow.. so the parent element thinks its not even there. So you end up having to do something to clear or contain it some how ( Such as, floating the parent also, or declaring a height.. but that seem convoluted compared to the THOUGHT process I am outlining)
4) now that everything is naturally matching, we really needed the two images ( which is why I got rid of the other background declaration) the rest of the process becomes.. ahem.. transparent. UGH.. sorry couldn't resist.

In short, you could have achieved what you asked by simply incorporating "hiding then appearing" into your code, the rest is just streamlining your style. "Less is more", as they say.

Thanks Ray! I had no idea that CSS was that intricate. I had been using declarations loosely without realizing the potential for such repercussions. I was just adding blocks, floats, etc. to IDs and classes simply with the way it looks in mind--exactly like you noticed in a previous thread of mine:

The first mistake you made was common , so no worries, and that is to code TRYING to make it LOOK some way rather than using semantics. The CSS part is just experience, that will come soon enough

And now I am seeing more and more why this method I have been using only forms a very shaky, un-solid foundation.

But I suppose my knowledge of the ins and outs of using different declarations will get better with experience? Do you reckon that my taking the time to study each individual declaration variable would help me more quickly advance my knowledge in this?

Thanks!

- Pam

[dresden_phoenix]

ah welcome to stage 3 of learning:

Stage 1: WHAT do we do?
Stage 2: HOW do we do it?
Stage 3: WHY do we do it?



You are not using your declarations incorrectly by any means. I just like to think "WHY" before doing anything.