Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 12, 2016 at 7:05 am #722966
    bjornwallman

    Hello,

    We are using the ALB to display some blog articles on the homepage. How do we keep the overlay on the image at all times instead of only on hover? We can not use the masonry blog because we have other elements mixed in. We are using the regular blog but offsetting them to get the desired look we need.

    I created a class and some CSS but it only works once I hover, then the overlay stays. But it does not show when the page first loads.

    I would also like to have the image slightly increase on hover like the regular images can.

    You can see the blog articles in the section section. The top right and bottom right have overlays.

    Hers is the CSS I am using:

    .avia_transform .blog-third-section a .image-overlay,
    .avia_transform .blog-third-section a:hover .image-overlay {
    opacity: 0.85 !important;
    display: block !important;
    background: #006b86 !important;
    }
    .avia_transform .blog-section-fourth a .image-overlay,
    .avia_transform .blog-section-fourth a:hover .image-overlay {
    opacity: 0.75 !important;
    display: block !important;
    background: #000 !important;
    }

    Any help you can provide will be much appreciated.

    Thank You.

    December 14, 2016 at 5:54 am #724100
    Ismael

    Hey bjornwallman,

    Thank you for using Enfold

    The display property of the overlay is set to “none” in the style.css file.

    .image-overlay-inside, .image-overlay {
    display: none !important;
}

    P.S: Awesome work! thumbsup

    Best regards,
    Ismael

    December 14, 2016 at 6:21 am #724114
    bjornwallman

    Thanks Ismael.

    That is set to display none because we do not want all images to have the image overlay. We wanted to target only those 2.

    Even if I take that style out, it still does not display the the overlay on the image at all times. Only after hover.

    It is out now. Not sure what we are doing wrong.

    Thanks

    December 16, 2016 at 5:54 pm #725484
    Nikko

    Hi,

    Try replacing this code:

    .avia_transform .blog-third-section a .image-overlay,
.avia_transform .blog-third-section a:hover .image-overlay {
opacity: 0.85 !important;
display: block !important;
background: #006b86 !important;
}
.avia_transform .blog-section-fourth a .image-overlay,
.avia_transform .blog-section-fourth a:hover .image-overlay {
opacity: 0.75 !important;
display: block !important;
background: #000 !important;
}

    to

    .avia_transform .blog-third-section a .image-overlay,
.avia_transform .blog-third-section a:hover .image-overlay {
  opacity: 0.85 !important;
  display: block !important;
  background: #006b86 !important;
  left: 0 !important;
  top: 0 !important;
}

.avia_transform .blog-section-fourth a .image-overlay,
.avia_transform .blog-section-fourth a:hover .image-overlay {
  opacity: 0.75 !important;
  display: block !important;
  background: #000 !important;
  left: 0 !important;
  top: 0 !important;
}

    Let us know if this helps. :)

    Best regards,
    Nikko

    December 20, 2016 at 4:53 am #726390
    bjornwallman

    Thanks Nikko! That works great for desktop.

    However, I am still having the issue on mobile. It is fine when shrinking the browser down, but not when actually viewing it on my phone.

    Do you know why that would be?

    Thanks

    December 22, 2016 at 11:58 pm #727715
    Nikko

    Hi,

    I’m not really sure, can I ask what phone are you using to test? is it an iphone? also please post a screenshot.

    Best regards,
    Nikko

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