Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 11, 2019 at 3:19 am #1065268
    sundara88

    Hi,
    I have some images that show the image overlay on hover but I’d like to show them permanently because they have the product title on them. With css I’ve made only the bottom 30% of the overlay show up.
    Please see this screenshot:

    https://snag.gy/tClgpD.jpghttps://snag.gy/tClgpD.jpgha

    The image on the left is how you see it now and when you hover you see the overlay like on the right image.
    Is there a way I can have the overlay showing at all times?
    Thanks,
    Lisa

    February 13, 2019 at 3:35 am #1066187
    Mike

    Hey sundara88,
    Sorry for the late reply, To show the hover title all of the time you could use the “opacity: 1;” but we will need to see your site to examine the sectors, please include a link.
    Also, your image is not working, please re-up.

    Best regards,
    Mike

    February 13, 2019 at 5:24 am #1066245
    sundara88

    Hi Mike,
    I don’t think Opacity:1 would work because it has about 70% opacity which only shows up when you hover on the image.
    Here’s the image again.

    https://snag.gy/WO0vY9.jpg

    The right photo is what it looks like when you hover on an image.

    I need the overlay on the right photo to show up even when not hovered on it.
    Thanks,
    Lisa

    February 14, 2019 at 2:38 am #1066731
    Mike

    Hi,
    To show the image overlay title full time on the page /slow-combustion-woodheating/
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .av-overlay-on-hover .avia-image-container-inner .av-image-caption-overlay {
    opacity: 1 !important; 
    filter: alpha(opacity=100) !important; 
}

    On the home page the titles already show before hover, but hovering makes them transparent, this looks like it is caused by this custom css, please try removing:

    .av-overlay-hover-deactivate:hover .av-caption-image-overlay-bg {
    opacity: 0 !important;
}

    If you can’t find it, then try adding this css:

    #top.home #after_full_slider_1 .av-overlay-hover-deactivate:hover .av-caption-image-overlay-bg {
    opacity: 1 !important;
}

    Best regards,
    Mike

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