0

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

Kenny Yap
  • 1,317
  • 5
  • 17
  • 39

3 Answers3

2

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.

markbernard
  • 1,412
  • 9
  • 18
0

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/

sobolevn
  • 16,714
  • 6
  • 62
  • 60
0

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.

ludiccc
  • 321
  • 2
  • 10