/ Published in: CSS
Think this is a good one to remember.
Let's say you have a set of list items and all of them have a border of 1px. Inside you have an image.
When you hover over each list item you want the border to change thickness to 2px.
The trick is to reduce the width and height of the list item so, when you add the thickness of the border to it - its still the same size. So:-
Normal state: 84px + 2px border x 84px + 2px border= 86px x 86px
Hover state: 82px + 4px border x 82px + 4px border = 86px x 86px
Then to ensure the image inside the list item doesn't "jump", position it absolutely and use a negative margin.
Let's say you have a set of list items and all of them have a border of 1px. Inside you have an image.
When you hover over each list item you want the border to change thickness to 2px.
The trick is to reduce the width and height of the list item so, when you add the thickness of the border to it - its still the same size. So:-
Normal state: 84px + 2px border x 84px + 2px border= 86px x 86px
Hover state: 82px + 4px border x 82px + 4px border = 86px x 86px
Then to ensure the image inside the list item doesn't "jump", position it absolutely and use a negative margin.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<body> <style> /* list item styles*/ ul {width:500px;list-style-type:none;} ul li{float:left;margin-left:14px;height:86px;width:86px;} /* links */ ul li a {display:block;width:84px;height:84px;border:1px solid #0033CC;color:#000;text-decoration:none;} ul li a img {width:84px;height:84px;display:block;position:relative;border:none;} /* hover state */ ul li a:hover {border:2px solid #cc0000;width:82px;height:82px;position:relative;overflow:hidden;} ul li a:hover img {position:absolute;left:-1px;top:-1px;} </style> <!-- html --> <ul id="my-list-items"> <li> <a title="my-page.html" href="my-page.html"> <img src="test.jpg"/> </a> </li> <li> <a title="my-page-2.html" href="my-page-2.html"> <img src="test.jpg"/> </a> </li> </ul> </body>