Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 22, 2024 at 10:19 pm #1462712
    Kelly Erickson

    Hi there!

    Is there any way to replace the mouseover effect on Portfolio items laid out in a grid? My client wants a GIF animation of their product when you mouse over the respective portfolio item.

    The other option is, instead of using the Portfolio Grid, I can build columns with simply the Image drag & drop item – if there’s a way to do the custom mouseover on Images instead of Portfolio grid items.

    Just curious what my options are before I report back.

    Link in private content below.

    Thank you!

    July 22, 2024 at 11:25 pm #1462720
    Mike

    Hey Kelly,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #av-sc-portfolio-1 .grid-image.avia-hover-fx:hover .image-overlay.overlay-type-extern .image-overlay-inside {
    content: url(https://www.boomtownbrew.com/wp-content/uploads/2023/04/LasPalmas-BoomtownBrewery_350-2.png);
}
 .main_color #av-sc-portfolio-1 .image-overlay .image-overlay-inside:before {
 	background-color: transparent;
 }
.avia_transform #av-sc-portfolio-1 a:hover .image-overlay {
    opacity: 1 !important;
}

    This will make mouse-over a different image, you can change the image to a gif and make each one different, first test the css to see how the image changes.

    Best regards,
    Mike

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