:hover effect over an image in list

  • morene

    (@morene)


    10 years, 4 months ago

    hi, i´m making image gallery. I have placed images inside unordered list. I set padding around images and than I tried to create hover effect only throught image (without padding) so i´ve used the calc() function. here is website

    http://rpz.startupweb.sk/vyrobky/

    but how you can see hover effect doesn´t cover whole image. Whole image have black overlay but on some edges you can see white line. Could you help me and write what´s wrong or write right procedure. Thanks a lot

    CODE FOR UNORDERED LIST:

    ul.thumbnail {
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }

    ul.thumbnail li {
    position: relative;
    display: inline-block;
    width: 23.5%;
    cursor: pointer;
    /*padding-right: 10px;*/
    }

    ul.thumbnail li img {
    position: relative;
    max-width: 100%;
    padding: 1.875em;
    }

    CODE FOR HOVER EFFECT:

    .parent {
    width: calc(100% – 3.75em);
    height: calc(100% – 3.75em);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    background-color: black;
    opacity: 0;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: opacity 500ms;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    }

    span.parent span {
    display: inline-block;
    position: relative;
    top: 25%;
    }

    ul.thumbnail li:hover span.parent{
    opacity: 0.7;
    }

    .parent-icon {
    padding: 25px;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • graphicscove

    (@graphicscove)

    10 years, 4 months ago

    Here’s something that might help you. I’ve only included the properties that are important, you can add back in the others if you need to, except for the transform and transition where I’ve mentioned below. There’s no need to have these for a working version. Get it working first then add in the transitions.

    ul.thumbnail {
    font-size: 0;
    line-height: 0;
}
ul.thumbnail li {
    position: relative;
    display: inline-block;
    width: calc(25% - 20px);
    margin: 10px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
ul.thumbnail li img {
    padding: 0;
}
.parent {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* Remove the transform and transition properties completely */
}
    Thread Starter morene

    (@morene)

    10 years, 4 months ago

    thanks. finally i change this things

    HTML

    <li>
    <div class="img-container">
        <img src="" alt="thumb_5f">
        <span class="parent">
           <span class="parent-icon"></span>
        </span>
    <div>
</li>

    CSS

    .img-container{
   possition: relative;
}
ul.thumbnail li img{ padding: 0px; }
ul.thumbnail li{ padding: 30px; }

    now it´s look better but when i added media query :hover effect doesn´t cover whole image. On some mobile devices hover doesn´t cover whole image and than at the bottom of image is “white line”. Any idea how to fix it? thanks

    graphicscove

    (@graphicscove)

    10 years, 4 months ago

    Probably not the best way of doing it but this works for you:

    img {
    vertical-align: super;
}
    Thread Starter morene

    (@morene)

    10 years, 3 months ago

    hi, thanks. It´s seems much better. But I put vertical-align to

    .parent {
    vertical-align: super;
    }

    on img i had big problem with padding-bottom.

    but there is still problems with screen resolutions on 1160px or 800px … you can see it when you decrease your screen. (http://www.responsinator.com/?url=www.rpzsro.sk%2Fde%2Fphotogalerie%2F – the last one).

    I tried change

    .parent {
    height: 100.01%;
    }

    It isn´t good way, but nothing helps.

    Any idea, thanks a lot

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

The topic ‘:hover effect over an image in list’ is closed to new replies.