Grow your CSS skills. Land your dream job.

Infogrid Animate Image

  • # August 4, 2011 at 8:48 pm

    Hello,

    From the amazing “InfoGrid” – http://css-tricks.com/examples/InfoGrid/

    Wanted to see about putting an image in the

    and have it be let’s say 150×150 but when that “dt” is active, have it expand to 300×300. Then of course animate back down to it’s original size when you click on another “dt”. I see that we can do this to the font-size in the “dt” but not images. Thanks!

    # August 5, 2011 at 11:57 am

    what is this i dont even

    # August 5, 2011 at 12:20 pm

    How are you animating the text…can you show us how?

    # August 5, 2011 at 4:50 pm

    The text size animates when you click on that specific “DT” to a larger size and then returns to normal once you’ve clicked on another “DT”. I’d like to do the same effect with an image in each “DT”.

    # August 6, 2011 at 12:37 am

    I suspect that you’d have to dig into the JS to do this but you the only way I know of to do it with CSS is with a transform/scale but that isn’t supported in all browsers.

    # August 6, 2011 at 3:18 pm

    Yeah, That’s what i was hoping for, this is the “JavaScript Jungle” category right?

    # August 7, 2011 at 10:54 am

    I don’t think the Infogrid was designed with that in mind, as it lists definitions and their titles. I can however see the appeal of using it for images. You may be better creating something yourself, rather than reverse engineering the Infogrid.

    If you decide to carry on with the Infogrid you can target your image inside the ‘dt’ using jQuery’s ‘.find()’.

    Example*:

    // animate current title to larger size
    $el.animate({
    "font-size": "20px",
    paddingTop: 10,
    paddingRight: 5,
    paddingBottom: 0,
    paddingLeft: 10
    }).find('img').animate({ //play with your image(s)
    width: 300,
    height: 300
    }).parent().next().slideDown();

    * No guarantees that this will work, at all!!

    # August 8, 2011 at 12:12 pm

    Thanks clokey2k! This is what I have working for me based on your feedback:


    $el.find('img').animate({ //enlarge image(s)
    width: 225
    }).parent().next().slideDown();


    $allTitles.find('img').animate({ //reduce image(s)
    width: 125
    }).parent().next().slideDown();
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".