Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 22, 2021 at 2:56 pm #1282816
    Birdster

    I’m using the portfolio grid element and struggling to find a way to make the ‘.image-overlay-inside:before’ element always visible, rather than only on hover.

    The desired effect is to have the icon visible before you rollover the thumbnail, but keep the fade on the background image.

    I have used a custom icon by applying it to this class: .image-overlay.overlay-type-extern .image-overlay-inside:before and removed the animation, but not sure what else needs to edited?

    I am aware I could hardcode the icon into all thumbnails, but to avoid human error, would rather achieve this icon overlay using css.

    Any ideas would be greatly appreciated.

    February 24, 2021 at 4:02 pm #1283428
    Ismael

    Hey Birdster,

    Thank you for the inquiry.

    The opacity of the overlay is set to 0 by default, and this opacity is increased on hover, so this css code should work to make the overlay always visible. 

    .image-overlay {
	opacity: 0.5;
	filter: alpha(opacity=0.5);
}

    Best regards,
    Ismael

    February 26, 2021 at 12:00 am #1283763
    Birdster

    Hi Ismael,

    Unfortunately this code didn’t work for me. The overlay icon is still hidden until the mouse hovers over the portfolio thumbnail.

    It seems the class .image-overlay controls both the icon and the white overlay on the thumbnail image so this CSS effects the opacity on both. Is there a way to keep only the icon at 1.0 opacity while the white background fades? I believe the class for the icon is .image-overlay.overlay-type-extern .image-overlay-inside:before as that is how I added my own custom icon (I have tried adding the suggested CSS to this class which also didn’t seem to work either)

    Any other ideas?

    February 26, 2021 at 4:04 pm #1283879
    Ismael

    Hi,

    Thank you for the update.

    The css code above is working properly on our installation. Would you mind providing a screenshot of the issue, and a direct link to the page containing the overlay? We might be talking about two different things here, so providing a screenshot and/or creating a test page should help clear things out.

    Best regards,
    Ismael

    February 26, 2021 at 5:42 pm #1283902
    Birdster

    link sent privately, with log on details.

    With your code, the overlay stays visible after a rollover, just not on the page load.

    March 1, 2021 at 1:18 pm #1284412
    Ismael

    Hi,

    overlay stays visible after a rollover,

    Yes, that is how the above css code works. The overlay should only appear on hover by default, but the changes above makes sure that it is always visible. Is it not how you want it? How did you apply the custom icon?

    Best regards,
    Ismael

    March 1, 2021 at 2:34 pm #1284430
    Birdster

    sorry, if I have confused things. Currently the overlay icon does not appear when the pages loads, which is what I want. So that:

    page loads: the overlay icon is visible and the portfolio thumbnail image fully opaque (currently no icon visible)
    on hover: the overlay icon is visible and the portoflio image has a white overlay of 50% transparency ( this works)
    on mouse off: the overlay icon is visible and the portoflio image returns to fully opaque ( currently icon stays, but so does the white overlay)

    Hopefully that helps explains what the client is after. I could flatten the icon into the thumbnail image using photoshop, but was really hoping the current icon could simply stay visible the whole time instead?

    March 4, 2021 at 1:52 pm #1285394
    Ismael

    Hi,

    Thank you for the clarification.

    To make the icon visible on page load but not the overlay, we could set the default background color to transparent, then only change it to white on hover. Please look for the previous css code that we previously suggested. 

    .image-overlay {
	opacity: 0.5;
	filter: alpha(opacity=0.5);
}

    .. and replace it with this:

    
.image-overlay {
    opacity: 0.5;
    filter: alpha(opacity=0.5);
    background: transparent !important;
    left: 0;
    top: 0;
}

.image-overlay:hover {
   background: #ffffff !important;
}

    Best regards,
    Ismael

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