Infogrid Animate Image

[micss]

Hello,

From the amazing “InfoGrid” – https://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!

[Ezeke]

what is this i dont even

[micss]

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”.

[micss]

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

[clokey2k]

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!!

[micss]

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();

[Author]

Posts