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.
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.
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??
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.
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.
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.
