CODEWITHSUNDEEP
htmlcss
Kenny Yap
Kenny Yap

Reputation: 1337

CSS Hover border without re sizing image

I would like to ask what have I done wrong on my hover border-below function without re sizing the image? I have followed the guide given here under inner border but still my link when I hover the image still re size.

.navbar-div a img, .navbar-div a {
    border: none; 
    overflow: hidden; 
    float: left; 
}

.navbar-div a:hover { 
    border-bottom: 5px solid black; 
}

.navbar-div a:hover img { 
    margin: -5px;

Here is my JSFiddle link.

Thank You

Upvotes: 0

Views: 3183

Answers (3)

markbernard
markbernard

Reputation: 1420

You have a constraint on the total height of the container for the anchor containing the image. When you add the border you are adding 5px to the height of the container, which will shrink the image since it is maintaining its aspect ratio to fill the smaller available height. Since margins are not considered when calculating the size of the container it is changing size. I changed it to change the size of the padding instead here.

.navbar-div a:hover { 
  border-bottom: 5px solid black; 
  padding-bottom: 5px; 
}

You may consider trying a different, less complicated approach. Since you will always know your background color you could make the border invisible but always there by just changing the color as seen here.

Upvotes: 2

ludiccc
ludiccc

Reputation: 353

You must change the 

.navbar-div a:hover img { 
  margin: -5px; 
}

What it is doing is to shrink the space inside the DIV, so the image will shrink also.

Upvotes: 0

sobolevn
sobolevn

Reputation: 18070

You can use :after pseudo-element. Code:

.navbar-div a:hover:after {
    content:"\a0";
    display:block;
    padding:2px 0;
    line-height:1px;
    border-bottom:2px solid #000; 
}

http://jsfiddle.net/w4zvad1x/

Upvotes: 0

Related Questions