How do I keep an image inside a div with a set width and height, but keep the rest of the image hidden?

It's kind of difficult to word... So I made a picture!

_{(source: tumblr.com)}

I tried giving the div that has a set width and height overflow:hidden; but that didn't w开发者_JAVA技巧ork... I searched all over and I probably just didn't word it right.

I gave the tag 'javascript' just because this may require javascript, if it doesn't please comment and tell me to remove the tag! Thankyou!

HTML

<div class="trigger" id="photoTile"> 
<img id="photoSmall" src="{PhotoURL-500}">
<h5>Photo</h5>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{MonthNumber} {DayOfMonth} {Year}
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{block:NoteCount}{NoteCount} <img    
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
</div>

CSS

.trigger {
margin:0 20px 20px 0;
float:left;
background:#6f7f7a;
width:115px;
height:105px;
padding:5px;
}

#photoTile {
width:115px;
height:105px;
overflow:hidden;
background:none;
}

#photoSmall {
opacity:0.4;filter:alpha(opacity=40);
position:absolute;
z-index:-1;
}

Putting the image in a <div> with fixed height and width, and "overflow: hidden", most definitely will crop an included <img>.

edit Here is a jsfiddle showing an image much larger than 100x100 in a 100x100 <div> styled with "overflow: hidden". Here's the CSS for the <div>:

#w { height: 100px; width: 100px; overflow: hidden; }

I didn't have to do anything interesting with the <img> at all; it's just lexically nested inside the <div>.