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

This reply has been reported for inappropriate content.

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;