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!
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;
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
You need to put line-height:0px; in works class like : .works { overflow: hidden; position: relative; line-height:0px; }
Than check it out.....
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: blockon 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!
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!
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;