Tagged: , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 23, 2024 at 5:37 am #1445270
    dameonjamie

    I have a portfolio grid on the homepage at https://www.juliesilvester.com.au/

    I want to make the gallery preview zoom in or enlarge on mouse hover.

    I also want to remove the (current) milky white desaturation on mouse hover.

    Thank you!

    Cheers,
    Dameon

    May 23, 2024 at 8:03 am #1445282
    Ismael

    Hey Dameon,

    Thank you for the inquiry.

    You can use this css code to enlarge the portfolio grid image and adjust the opacity of the background on hover.

    .grid-image:hover img {
    scale: 1.4;
    transition: all 0.4s;
}

.avia_transform a:hover .image-overlay {
    opacity: 0.1 !important;
}

    If you want to adjust the background color of the overlay, include this css code:

    #top .all_colors .grid-image .image-overlay {
    background-color: red;
}

    Best regards,
    Ismael

    May 24, 2024 at 2:55 am #1445450
    dameonjamie

    Hi @Ismael,

    Thanks for your reply. I’ve added your CSS code. The zoom on hover is not working. Can you have a look?

    https://www.juliesilvester.com.au/

    The colour change does work. What if I want the colour change on hover to be transparent?

    Cheers,
    Dameon

    May 24, 2024 at 6:29 am #1445465
    Ismael

    Hi,

    Thank you for the update.

    We couldn’t find the css rule for the zooming effect when we checked the site. Please try adding it again, or post the login details in the private field so that we can test it properly.

    Best regards,
    Ismael

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