AlirezaM

# January 30, 2013 at 3:58 am

Hello!

I want to create an image hover effect and want to when hover on images the opacity decrease to 50% and background to #000 color.

But when I hover on img the black background comes 1px down.

here is the result:
http://cdpn.io/smFjp

how can I fix this problem???

Thanks in advance!

Alireza.M

jitendermalik17

# January 30, 2013 at 4:26 am

You need to put line-height:0px; in works class like :
.works {
overflow: hidden;
position: relative;
line-height:0px;
}

Than check it out…..

Melindrea

# January 30, 2013 at 4:27 am

I can’t explain why this is happening, but it appears to have to do with the image being inline-block (set in the browser stylesheet) rather than block.

The black “line” is there because the div that contains the image is a few pixels taller than the image is, and by setting `display: block` on the image that problem is solved.

If anyone has insights into _why_ this is happening, I’d be glad to hear it, since it seems odd, to say the least!

AlirezaM

# January 30, 2013 at 5:23 am

Thanks you very much!

the first “line-height:0px;” code worked very well.
the second code “display:block;” worked as well but with some issues on hovering.

Thanks again!

wolfcry911

# January 30, 2013 at 8:09 am

Images are inline by default. Space is therefore reserved ‘under’ the image for the descenders of a font – it rests on the baseline. There are a number of ways to get the effect you want, two of which have been mentioned: with a line-height of 0 the baseline is at the bottom of the inline-box; changing the default display value to block removes the inline characteristics the image would normally have. The third way is to set the image to the bottom of the inline-box with vertical-align: bottom;