Assuming they do not have to be in IMG tags…
HTML:
<div class="thumb1"> </div>
CSS:
.thumb1 { background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */ width: 250px; height: 250px; } .thumb1:hover { YOUR HOVER STYLES HERE }
EDIT: If the div needs to link somewhere just adjust HTML and Styles like so:
HTML:
<div class="thumb1"> <a href="#">Link</a> </div>
CSS:
.thumb1 { background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */ width: 250px; height: 250px; } .thumb1 a { display: block; width: 250px; height: 250px; } .thumb1 a:hover { YOUR HOVER STYLES HERE }
Note this could also be modified to be responsive, for example % widths and heights etc.