Image Block Hover: Zoom + color opacity overlay + text caption

Hi,

I'd like to create hover states over image blocks as shown on this site (likely not an SS site): https://native.com/work/overview

I had found the image Zoom-on-hover code, but also want to add a hex color overlay over the entire image (and control its opacity level) and then add text on top of that. Using 7.1 / Fluid Engine.

Thanks in advance!

JV

First, add a blank Classic Editor section

Next, add an Image Block > Choose Inline Design

Next, add Image Caption and choose this option

Next, add this code into Design > Custom CSS

figcaption.image-caption-wrapper {
    visibility: hidden !important;
    transition: all 0.3s ease;
  pointer-events: none;
}
.design-layout-inline:hover figcaption.image-caption-wrapper {
    visibility: visible !important;
    max-height: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

Hi,

I can't seem to get this to work. And noting here that my options look different than the screen shots of the interface you are showing above.

To try to improvise, I chose "Overlay" as the design option since I don't see anything about choosing "Inline" in the image block options.

When I add an image in the content editor for the image block, I don't see an option to add an Image Caption at all. Only the " Alt text". So I tried placing my test copy in the alt text spot in case things have changed:

Then I added your code in Design > CSS and nothing happens after I save. No hover states at all. Plus the color overlay is on the image by default.

Any thoughts on the discrepancy here? Thanks!

JV

Did some searching and the reason I do not see an option to add a caption (or Inline) is because I am using Fluid Engine /7.1 (mentioned that above).

Word is, I can manually add captions with a text block anywhere I want, which is fine by me, but I need updated code that will hide those until the hover state. I think you place the captions behind the image once you have them where you want them and the code does the rest. But... I need the right cod to achieve this 🙂

JV

Ah, Ok!

I misinterpreted that part. Thought you just meant to create a blank section. Didn't realize you could combine 7.1 and classic things.

Thanks!

Do you know if it's possible to do this same technique, but instead of the text appearing when you hover over the image, I can make a PNG image appear?

On 5/15/2023 at 10:01 PM, Antknee729 said:

Do you know if it's possible to do this same technique, but instead of the text appearing when you hover over the image, I can make a PNG image appear?

 

You mean

Initial: show image, no text

Hover: show another image, no text

If yes, this is possible, just add an Image block (you can use new editor or classic editor) > Then share link to page where you added an image, we can check and give the code