Nuno Silva

Adding a frame to a thumbnail picture using css

Today i was helping Pre finishing our Screenshot and Art Work page of Orion’s Belt.

One of the thinks i wanted to add was a frame to the thumbnail pictures, but i didn’t want to add that frame to the image itself.

I saw this kind of thing done in the StartCraft 2 Artwork page. I inspected the code but didn’t like what i saw.

They basically have 2 divs ( with styles inline … bahhh!!!), anchor and a image (all by this order).

Their strategy was to associate a thumbnail image with a style and in the end insert the frame as the final element, the top most, something like this:

<div style='ThumbnailImage'>
    <div style='some image to give some effect'>
        <a href='Place to see the image in a good size'>
             <img src='a transparent with Frame'/>
        </a>
    </div>
</div>

Problems with this solution? The only problem i see is that you are obligated to have the style inline or you have to add a list of all the thumbnails to your css file, and have a map… ok, no..

If you have a thumbnail image:

<a href='Place to see the image in a good size'>
       <img src='ThumbNail Image'/>
</a>

and you want to put a frame on to it, simply insert a div before your image. This div will contain your frame:

 <a href='Place to see the image in a good size'>
       <div class='frame'></div>
       <img src='ThumbNail Image'/>
</a>

the css style is also very simple:

.frame{
	width:XXXpx; /*Width of the thumbnail*/
	height:XXXpx; /*Heightof the thumbnail*/
	background:url(ThumbnailFrame.png);
	position:absolute;
}
img{
	margin:Wpx
}

Notice that i added a margin to the image? This is just to center the image in the frame.

You can see the result of this example in the Screenshot and Art Work page of Orion’s Belt.