Make Text Appear When Hover over Images in Grid

Hi there!

So I’m trying to replicate the same animation from the website examples below. When you hover over an image, text appear and the image opacity dims At the same time new text appears over the image - http://nwe.com/ or Portfolio | MOCEAN I prefer the first one on NWE.com where just some words at the bottom appear on hover. I stayed up ALL night trying to do this and it’s still not right. I know how to make an image dim when you hover over it and I just learned how to animate a text link block to move it to the side, but it’s not working together, you either have to hover over the bottom text area or the image and not both together. I just want to start from scratch, so please tell me how I can do this quickly. I’m already past my deadline and extremely behind. :confused:

Thanks,
Rayn


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Rayn, Welcome to the forums!

I created a simple project that demonstrates both effects. You can view the read only project and see one way to put this together. Both styles are demonstrated.

3 Likes

Sweet, I’ll ck it out in a few min and let you know how it turned out!

Thank you!!! :smile:

Ok, so this is exactly what I wanted! So quick question, I decided to go with the 2nd option and when I create a div block (parent) with an image as the background, I then dragged another div block inside the that one (child) and added a background image with low opacity to create a frosted look, the div block was short. See attached image. Do I need to enlarge the block to fit the grid??

24%20PM|299x500

Can you share your read-only project and the page and location of the element in your reply? That way we could see your actual setup.

Ok, but I don’t know how to do that yet, so give me a sec. Here’s the image again in the interim, don’t think it worked last time.

Try setting the height to 100% on the child div (Dive Block 17) I presume.

OK Got it! And here’s the Read-only link! Please keep in mind, I’ve been teaching myself all this stuff and am not a site designer or developer at all!! Nor do I want to be, just keeping it going till I find someone to hire. https://preview.webflow.com/preview/multiculturalscifiorg?utm_source=multiculturalscifiorg&preview=1bad29000f12ecc68df4b3b2f9e24c8b

Great! Glad I could help.

Webflow is an amazing tool. You can build really cool sites without having to know how to code.

There is lots of great how-to and instructional content in the University site.

If you get stuck, check there. If you can’t find the answer, come back over here and search the forums. Nothing matches? Post a new topic and someone will try to help you.

Happy site building!

It worked!! Thank you SO much! This should get me going now!

Thanks again!!
-R

1 Like

Hey Jeff,

Quick question if you’re still around. What’s the quickest way to apply the Overlays to all the other grids? OH the heading text on each grid is different though. :confused:

Copy and paste is your friend. You can also create a symbol that you just inject into the page, and then disconnect it and make your changes. It’s pretty quick to do it that way.

If you were using a collection, then you could just bind the text element to a field, as well as the background image. That would be a more serviceable approach if you were going to use the CMS and Webflow hosting.

Yes, I love copy & paste!
But just when I thought I was finished, the site started acting ‘buggy.’ It started taking a long time to scroll when I moved my mouse. And the hover animation got really slow as well. And the grid images were too small at 100% so I changed it to 400px, but wondering if that’s slowing down the site. It’s the only way to show the full images though, so I’m a bit confused.

Also, my background video isn’t acting right either. It’s cutting people’s heads off in the video. I think it’s stretching the video when I upload it, because it’s blurry and not as sharp as the original video.
Here’s the shot of my site - https://preview.webflow.com/preview/multiculturalscifiorg?utm_source=multiculturalscifiorg&preview=1bad29000f12ecc68df4b3b2f9e24c8b