- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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…..
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;