SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dissolve Between Two Background Images on Hover

    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:
    Code:
    #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:
    Code:
    <div id="home"><div class="stripes"><a href="index.php">Home</a></div></div>
    Does anybody know what is the issue here? Thanks!

    - Pam

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hy,
    Try with this code, replacing yours:
    Code:
    #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.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MarPlo View Post
    Hy,
    Try with this code, replacing yours:
    Code:
    #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?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code:
    #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.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    Code:
    #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

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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:

    Quote Originally Posted by dresden_phoenix View Post
    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

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •