EDIT TO ADD - Sorry when you go into the preview link then you will need to go into the second page template called Effect Test. The first page you go into is my attempts at the parallax scrolling which I’m having a minor issue with too!
Hiya,
I’m trying to create the standard effect where you have an image which starts out as just the image on its own. When you hover over it then it either enlarges or shrinks within its container but without either showing the extra image (when enlarged) or adding any empty space (if shrink is chosen as the effect).
I then want some text on top of the image which will slide in and fade to 100% opacity also.
In the preview link below I sort of have this working in that I have the image and when you hover over it (you will need to hover over the very very top of the image very carefully or you won’t see how far I’ve gotten so far due to the problems I’m having) then the image enlarges and the text fades up and slides in.
Quite a few problems with it though. The first major one being that I don’t think I’ve done it at all in the simplest way possible.
I’ll be wanting to utilise this on a fair amount of image ‘blocks’ and so would like to do this in the most simplest programmatic way possible. I don’t think I have that at all at the moment and I’m sure as soon as you see my code mess you’ll understand what I mean by this.
Next up if you do get the image to enlarge you’ll notice that if your mouse then goes over where the text is situated that you get the standard text caret appear and the whole effect stops working. Really not sure on that one at all?
Lastly (phew! I think it’s the last one anyway!) I have a solid colour laid on top of the background image (is a background image even the right way to go about doing this one?) which I would also like to have change colour on hover. This does happen at the moment but I’d like it to change colour using easing which at the moment it just changes from one colour to the other very abruptly.
I could have sworn I’d seen a tutorial here on Webflow for all of this kind of thing but I can’t for the life of me find it now so any help anyone could give me with achieving this effect in the best way possible for using it multiple times and also without any of the inherent problems I seem to have caused for myself then I would be massively grateful.
Many thanks in advance for any help with all of this.
Best wishes,
Mark
Here is my public share link: LINK
(how to access public share link)