[Resolved] Border on hover around images with zoom effect

Home Forums Support [Resolved] Border on hover around images with zoom effect

Home Forums Support Border on hover around images with zoom effect

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2384575
    qpaq

    Hi,

    I understand that it’s rather hard to apply a border around an image if you want to apply a zoom effect at the same time.
    My zoom effect works fine with the following CSS piece but I couldn’t make a border around the image when hovered. However, I’ve seen it on a site. (see linked). How can I apply a border on an image with zoom effect?

    
    
    .imagezoom {
        position: relative;
        overflow: hidden;
    }
    
    .imagezoom img {
       max-width: 100%;
        transition: all 0.3s ease-in-out;
        display: block;
        width: 100%;
        height: auto;
        transform: scale(1);
    }
    
    .imagezoom:hover img {
        transform: scale(1.2);
    		filter: brightness(110%);
    }
    
    #2384705
    Ying
    Staff
    Customer Support

    Try this CSS:

    .imagezoom {
        position: relative;
        overflow: hidden;
    }
    
    .imagezoom img {
       max-width: 100%;
        transition: all 0.3s ease-in-out;
        display: block;
        width: 100%;
        height: auto;
        transform: scale(1);
        border:2px solid transparent;
    }
    
    .imagezoom:hover img {
        transform: scale(1.2);
        filter: brightness(110%);
        border:2px solid black;
    }
    #2386390
    qpaq

    This didn’t work out but the following did. I think the container has to be treated separately. Border didn’t work but outline solved the problem.

    
    .imagezoom {
        position: relative;
        overflow: hidden;
    }
    
    .imagezoom img {
       max-width: 100%;
        transition: all 0.3s ease-in-out;
        display: block;
        width: 100%;
        height: auto;
        transform: scale(1);
    }
    
    .imagezoom:hover img {
        transform: scale(1.1);
        filter: brightness(110%);
    }
    
    .imagezoom:hover,container {
    outline: solid 2px black;
    }
    #2386452
    Ying
    Staff
    Customer Support

    Glad you figured it out.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.