Streaming live at 10am (PST)

Problem with image hover animations…


#1

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! :wink:

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)


#2

Don't know if anyone has seen this post yet but perhaps someone could help out if they know what I'm on about here.

I've actually gotten a lot further on this now as can be seen in this preview :

https://preview.webflow.com/preview/webflow-tests-2?preview=6179eedb39d375edae76ab256d5caa8e

If you scroll all the way to the bottom of that template then you'll see two images, one of a camera and one just a background pattern overlay.

Everything (animation wise anyway) is working exactly as I'd like it to but when you hover over one box then both fire off together.

I know it's because both are using the same interaction which is specifying a certain element to animate but I'd seen it done exactly like this on a Webflow template and it worked fine although I am wondering how if all elements are named the same? How is it possible to make these sorts of thing programmatic so that all I have to do is change the image out and change the inner contents (the text) and it all works fine?

Many thanks for any help with this.

Best wishes,

Mark


#3

Grrr!!! Never mind.

For anyone wondering how it is now working I hadn't set the limit to nested elements parameter!! DOH!!

Consider this one fixed and working now.

Thanks,

Mark


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.