Wie kann ich ein Bild in einem Div mit einer bestimmten Breite und Höhe halten, aber den Rest des Bildes versteckt halten?

Question

Es ist etwas schwierig zu formulieren... Also habe ich ein Bild gemacht!

_{(Quelle: <a href="http://26.media.tumblr.com/tumblr_lfyudgGauy1qboy47o1_r1_400.png" rel="nofollow noreferrer">tumblr.de </a>)}

Ich habe versucht, die div, die eine feste Breite und Höhe overflow:hidden hat; aber das hat nicht funktioniert... Ich habe überall gesucht und wahrscheinlich habe ich es einfach nicht richtig formuliert.

Ich habe den Tag 'javascript' nur deshalb vergeben, weil dies möglicherweise Javascript erfordert. Falls nicht, bitte ich um einen Kommentar und die Aufforderung, den Tag zu entfernen! Dankeschön!

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;
}