Return to Snippet

Revision: 16660
at August 11, 2009 13:18 by Meander365


Updated Code
<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>

Revision: 16659
at August 11, 2009 13:16 by Meander365


Initial Code
<body>

<style>
/* list item styles*/
ul {width:500px;list-style-type:none;}
ul li{float:left;margin-left:14px;height:100px;overflow:hidden;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>

Initial URL


Initial Description
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.

Initial Title
Change Border Size on Hover Without Parent or Child Content "Jumping"

Initial Tags
css

Initial Language
CSS