Advanced Search

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