Forums

Give help. Get help.

  • # 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

    # 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…..

    # 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!

    # 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;

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag