Okay
  Public Ticket #2288563
Color Overlay + Link to large image?
Closed

Comments

  • Thomas Schienagel started the conversation
    February 2, 2020 at 11:45pm

    Hi there,

    I have a Single Image with "Hover Animation" set to "Color Overlay" and would like to open a lightbox to view the larger image on click.

    "Link to large image?" is enabled and the whole setup works perfectly fine as long as "Hover Animation" is set to "Zoom In". So, my assumption is that the MouseOver is blocked by the overlay effect.

    Any ideas from your side?
    Thanks for your help!

  •  8,992
    Tahir replied
    February 3, 2020 at 7:37am

    Hey,
    Please provide the page url so that i can write up the custom css for whats possible.
    Thanks

    ThemeNectar Support Team 

  •   Thomas Schienagel replied privately
  •  8,992
    Tahir replied
    February 4, 2020 at 6:30am

    Hey Again,

    Yes thats correct the div overlaps it though if you wish to use the overlay option then the overlay will have to be added using a pseudo css element.

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .img-with-aniamtion-wrap .inner .hover-wrap[data-hover-animation="color-overlay"] .hover-wrap-inner a:after {
    content: '';
    background-color: rgba(50, 214, 255, 0.5) !important;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity .65s cubic-bezier(.2,1,.2,1);
    transition: opacity .65s cubic-bezier(.2,1,.2,1);
}
.img-with-aniamtion-wrap .inner .hover-wrap[data-hover-animation="color-overlay"] a:hover:after {
    opacity: 1 !important;
}
.img-with-aniamtion-wrap .color-overlay {
    display: none !important;
}

    Thanks

    ThemeNectar Support Team