Image animation on hover

Hi!

I am trying to make an animation that is happening when you hover over an image.
I have seen it on a website and I am trying to make a similar one.

The website is here: https://mfisher.com/

In the first two images, when you hover over them, the animation distorts the image.

I think it’s very difficult to build it from scratch, so my thought is to find a plugin or a very close effect to it as an alternative and adjust it, but I am not sure as I am not an expert to these animations :slight_smile:

Is this something doable? Or maybe a solution close to it?

Thank you!

With that link I just get 2 big white zeros on a black page that suddenly redirects to a completely blank white page?

I don’t think that’s the correct link for what you were talking about?

It takes a long time to load. Once you get the text that says Art Objects, if you scroll down there are 2 images. At least that’s what I get.

1 Like

In Chrome on my mac I see something text that says ‘Art Objects’ for about 2 seconds then I get this forever.

:open_mouth: :open_mouth: :open_mouth:

I am not sure what’s going on, the black screen with the white zeros is the pre-loader, after that It gets you into the site (it makes an animation too).

Could you try from another browser too?

I am from Chrome on windows.

After the loading screen, its gets you here:

1 Like

I’m also getting what @Gandalf is seeing. @PaulOB are you sure you have the right link? :slight_smile: .

That animation is done with WebGL I think, if I’m not mistaking. But can be done CSS only too. I have such animation on my blog.

image

1 Like

Great!

Could you point me out to your blog so I could check it?

@nikostzounakos I can show you the code if that’s what you mean?

1 Like

Yes that would be great!

@nikostzounakos ok here it is. Hope it gives you an idea and helps :slight_smile:

#flower{
    z-index:9999;
	position: relative;
	top:15em;
	left:-1em;
	width: 12em;
	height: 12em;
	padding-top: 16.25em;
	margin: 9em auto;
	border: none;
	background-image: url(https://i.ibb.co/CHHMHrR/pink-cherry-blossom-on-black-260nw-48419839.jpg);
	background-repeat:no-repeat;
    background-size: 100% auto;
    z-index:9999;
    
 }
 
 #ripples {
    z-index:9999;
 	position: absolute;
 	width: 11.5em;
 	height: 4em;
 	top: 6em;
 	left: -1.5em;
 	background-image: url(https://i.ibb.co/BBqP9YX/pink-cherry-blossom-on-black-bottom.jpg);
    background-size: 132% auto;
    background-position: 0 -9.75em;
    filter: url(#turbulence);
 }

@media ( max-width:25em ) {
#flower{
	width: 12em;
	padding-top: 12.38em;
	margin: 6em auto;
	border: 0.2em solid #fff;
   }
   
}

<div id="flower">
        <div id="ripples"></div>

         </div>
         
         <svg>
  <filter id="turbulence">
   <feTurbulence id="sea-filter" 
    numOctaves="3" 
    seed="2" 
    baseFrequency="0.02 0.05"/>
   <feDisplacementMap
    scale="10" 
    in="SourceGraphic" 
    in2=""/>
   <animate 
    xlink:href="#sea-filter" 
    attributeName="baseFrequency" 
    dur="8s" 
    keyTimes="0;0.5;1" 
    values="0.02 0.06;0.04 0.08;0.02 0.06" 
    repeatCount="indefinite">
   </animate>
  </filter>
 </svg>

<!-- JavaScript Includes -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>e code here
1 Like

It works in Firefox on mac but not in Chrome. I notice some of the other demos using the same routines don’t work in Chrome either. That site is impossible to navigate also as the cursor is missing.

They are using some libraries like greensock and Pixi for that effect like this.

https://liquid-effect.netlify.app/

Inspect the source code to see the links to the libraries.

There is a similar effect here from Codrops but that doesn’t work in my Chrome either.

https://tympanus.net/Development/DistortionHoverEffect/

You can do simple effects with the svg turbulence filter (as in ladans37 example) but you are limited to whole image effects.

Here’s one I just found on codepen but there are many others:

https://codepen.io/soju22/pen/OqPyrm

2 Likes

@PaulOB I have used the svg turbulence filter also in my ghost figure.

1 Like

Here’s one I just found on codepen but there are many others:

Endless possibilities, endless examples :slight_smile:

PaulOB thank you!!

Are these examples easily to be adjusted so it’s around the mouse pointer and not the whole image?

Also I am trying to see how the initial website is making the effect, but it’s a bit complicated

Unfortunately that could be quite a task if you want the exact same effect. You would be better off trying to find something that is close to what you want but simpler perhaps. Try searching for “css html Liquid distortion effect” on google and see if you can find something you can use or is close to what you want.

Otherwise you really are going to have to use all those libraries and get your hands dirty with the code unless you can find a plugin that does exactly what you wanted.

This one is quite close but would need a js expert to make it work under the cursor.

I notice that some of those examples I posted end up killing my browser eventually and the whole browser grinds slowly to a halt. These effects while they look great ultimately drain the browser of its resources and if you have a lot of tabs open then things stop working.

2 Likes

This one looks quite close.

(Codepen doesn’t work in my chrome mac)

It requires jquery and this plugin.

3 Likes

That’s beautiful.

1 Like

Yes I am trying these now and see how it goes.

Indeed this is a nice effect :slight_smile:

Thank you very much so far!

2 Likes