Item is invisible after applying a hover animation in Chrome

I have prepared two kinds of animations for my grid items:

  1. Only scale animation in hover
  2. Scale. move, filter(blur), and opacity animations for coming soon projects.

The second one doesn’t work in Chrome after publishing. But it works in the webflow constructor screen and Safari.

Links:

https://duolutions-wondrous-site.webflow.io/

https://preview.webflow.com/preview/duolutions-wondrous-site?utm_medium=preview_link&utm_source=designer&utm_content=duolutions-wondrous-site&preview=9e5312190b70be978f65b8da04fbcefc&workflow=preview

@Stan @austin guys, could you look at this, please?

I had a very short look into console and there is total mess in Chrome. It looks that you have some messed up custom code in your project setting.

1 Like

Thank you so much, @Stan ! I have fixed all of them, but the mentioned part still doesn’t work.

it is your me-icon-set overflow:hidden

1 Like

Thank you very much, @Stan . You are helping me with each problem. I really appreciate it. I have tried switching overflow to visible and it really works, yes. But this time the pic gets beyond the main div (as now, I have published the current version already). What can you suggest me to solve this case?

Simplest solution is to wrap each image in div element give it a class eg. img__w and set overflow: hidden (NOT ON IMAGE IT SELF) it should work and have desired effect.

1 Like

I think we are close to the solution. Could you check the link, please? https://duolutions-wondrous-site.webflow.io/

I got surprisingly result :slight_smile:

hi @parvizbayram I do not see any images wrapped in div here is what I recommended to do in previous response.

1 Like

I have applied your solution only for ME (icons on black bg) for now. Look how it looks at the first launch of the website, this is the problem.

UPDATE: BUT AFTER THE FIRST HOVER IT WORKS

HI @parvizbayram I have give you solution how it should be done from day one for asked issue. When a new element is introduced you have to adjust styling for rest. I have to go now but if you will be not able adjust style for title element I will look on it this evening but IMO it is just simple task you can manage. :wink:

1 Like

I totally understand you and have applied already.
Screen Shot 2022-11-15 at 6.28.11 PM

The image is in a separate div (overflow is hidden). But I have switched the overflow of the main div (me-icon-set) to visible.
It has started working but remains only one little thing. The current problem is when you launch the website showing this item looks like on the screenshot below (only the title is showing).

BUT after the first hover, the hover is start working smoothly. You can check it from Chrome: https://duolutions-wondrous-site.webflow.io/

We have deeply researched this case, but no solution. We gave up on this animation :confused:

I’m back, I will take a look and let you now after dinner. :wink: You giving up so easily then. :slight_smile:

1 Like

hi @parvizbayram here is final solution and suggestions for your future projects. :wink:

case project to study
read only

1 Like

Hello, @Stan . Thank you very much! The information in the video is really really beneficial and insightful. Thank you for your time and such a long and detailed video. But I had a little different problem. There was animation for soon projects in this order:

  1. Hide the project description.
  2. Blur the project’s image
  3. Black overlay with %50 opacity
  4. Soon text

When I tried it, I got the result in my last screenshot: the grid item has been hidden. I didn’t find a solution, and because of it, I had to simplify the hover animation.

2nd question:
I tried your method with classes during the initial tries, but I got the next result:
for example, when I was hovering over the illustration project, I was seeing the hover animation on the branding project as well, and vice versa. Because of it, I separated all hover items into different classes. How did you cope with it? I didn’t see this certain point in the video.

Hi @parvizbayram I have provided complete solution and you still have issues. I really do not know what are you doing in your project.

I have updated example to do exactly you need.

read only
live preview

Please take your time to study it in detail. If even after this very complex solution you will be not happy I’m sorry …

have a great day and good luck

1 Like

So sorry, but there wasn’t a solution to the blur effect issue in the video. But in your read-only link, it is resolved. But I can’t see how did you do it. I can’t see the structure. Anyway, thank you!

hi @parvizbayram like I have wrote I did exactly you asked for as you haven’t be able to add blur filter for some reason. Now you do not need to do anything but study it how it is done.

What you do not see in read-only project. What structure you are talking about ???

1 Like

Could I watch your video again, please?

I have already delete it as it was not essential to original request. Why you need a video? All you need is in read only link. I can do new video but I do not know what else you need to explain. Another option is to DM me Zoom link and we can have chat about it. :wink:

1 Like