IMage animate larger when DT is active animate smaller when isn't - php

Question

Looking to tweak this script: http://css-tricks.com/examples/InfoGrid/
I've added an image within each "dt", I'd like it to be a specific size when closed & then animate larger when that "dt" is selected (much like how the text is). Of course then return to it's original size when a different "dt" is selected.
Also would like more control over things that are in their "normal state" vs. "selected state". Any ideas?
<div id="page-wrap">
<div class="info-col">
<h2>Superman</h2>
<a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>
<dl>
<dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text</dt>
<dd>Stuff Here1</dd>
<dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 2</dt>
<dd>Stuff Here2</dd>
</div>
<div class="info-col">
<h2>Superman 2</h2>
<a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image 2</a>
<dl>
<dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 3</dt>
<dd>Stuff Here3</dd>
<dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 4</dt>
<dd>Stuff Here4</dd>
</div>
</div>
The JS:
$(function() {
// Set up variables
var $el, $parentWrap, $otherWrap, $imgBig,
$allTitles = $("dt").css({
padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
"cursor": "pointer" // make it seem clickable
}),
$allCells = $("dd").css({
position: "relative",
top: -1,
left: 0,
display: "none" // info cells are just kicked off the page with CSS (for accessibility)
});
// clicking image of inactive column just opens column, doesn't go to link
$("#page-wrap").delegate("a.image","click", function(e) {
if ( !$(this).parent().hasClass("curCol") ) {
e.preventDefault();
$(this).next().find('dt:first').click();
}
});
// clicking on titles does stuff
$("#page-wrap").delegate("dt", "click", function() {
// cache this, as always, is good form
$el = $(this);
// if this is already the active cell, don't do anything
if (!$el.hasClass("current")) {
$parentWrap = $el.parent().parent();
$otherWraps = $(".info-col").not($parentWrap);
// remove current cell from selection of all cells
$allTitles = $("dt").not(this);
// close all info cells
$allCells.slideUp();
// return all titles (except current one) to normal size
$allTitles.animate({
fontSize: "14px",
paddingTop: 5,
paddingRight: 5,
paddingBottom: 5,
paddingLeft: 5
});
// animate current title to larger size
$el.animate({
"font-size": "18px",
paddingTop: 10,
paddingRight: 15,
paddingBottom: 0,
paddingLeft: 10
}).next().slideDown();
// make the current column the large size
$parentWrap.animate({
width: 351
}).addClass("curCol");
// make other columns the small size
$otherWraps.animate({
width: 140
}).removeClass("curCol");
// make sure the correct column is current
$allTitles.removeClass("current");
$el.addClass("current");
}
});
$("#starter").trigger("click");
});

Answer 1

The answer that worked for me is:
$el.find('img').animate({ //enlarge image(s)
width: 225
}).parent().next().slideDown();
$allTitles.find('img').animate({ //reduce image(s)
width: 125
}).parent().next().slideDown();