Border effect over an image

I like the way the border grows when you rollover an image on the GSK website, is this css and any ideas how they are doing it.

Its the white thick border effect

Thought something like this


<div id="mainTopLeft2Top">
<a href="#" title="About us">
<img src="./images/home_Restoration.jpg" alt="About us" title="About us"/>
</a>
</div>

#mainTopLeft2Top{
position:relative; width:285px; height:160px; border-bottom:#ece3db solid 1px; 
}
#mainTopLeft2Top a:link{
 width:285px; height:160px; border:#FFFFFF solid 0px;
}
#mainTopLeft2Top a:hover{
 width:285px; height:160px; border:#FFFFFF solid 5px;
}

Not getting the effect wih it, it sort of shoves the image around, rather than the sort of hovering over the image

Hi,

They are just overlaying another element on top of the image that has white borders and rubs the image out. You could instead use :after to create this effect but you still need to wrap the image in a div.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.img {
	float:left;
	position:relative;
}
.img img {
	display:block
}
.img:hover:after {
	content:" ";
	border:10px solid #fff;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
</style>
</head>

<body>
<div class="img"><img src="http://placehold.it/300x300/" width="300" height="300" alt="test img"></div>
</body>
</html>

Or you could do it more simply by using box-sizing but this shrinks the image rather than leaving it the same size.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.border {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.border:hover {
	border:10px solid #fff
}
</style>
</head>

<body>
<div><img class="border" src="http://placehold.it/300x300/" width="300" height="300" alt="test img"></div>
</body>
</html>

perfic, cheers Paul.
am going to have to read some more up on css, some of that css is new to me.