Image block smooth transition hover effect


is there an easy way to make the image block hover a smooth transition instead of just popping to a different image?

Thanks in advance

View Replies: View Best Answer
mnakalay replied on at Permalink Reply
it is doable but would need some coding.
Right now what the block does is use javascript to swap one image source for another on hover and that can't really be animated.

1 option would be to add the fade in and out to the javascript so it would fade out, replace the image, fade back in.

Another option would be to change the way it works altogether with both pictures loaded at the same time, 1 on top of the other, and fading in and out the top one through css.

Do you know anything about code?
grafoman replied on at Permalink Reply
Only the basics :) . The first option seems to be the easiest.
How would i go about doing this?
mnakalay replied on at Permalink Best Answer Reply 1 Attachment
Actually I checked and that would introduce one problem in that on first use, before the second image is loaded and cached, the first one would fade out than nothing than the second one would appear without animation.

Anyway, here is a template you can use to achieve exactly what you want.

Download the file I attached to this message and extract it in your site's application\blocks directory.

After you extract it you should now have the directory application\blocks\image\templates\animated_hover and inside it 2 files view.php and view.css

Go to your site where you have one of those image blocks, put the page in edit mode, click on the image and select "Design & custom templates" from the dropdown.
From the toolbar that appears, click on the little cog icon and from the dropdown that appears, under "Custom Template" select "Animated Hover".
Click on the blue save button from the toolbar.
Save and publish your page and you're all set to go.

Repeat the process to use the template for any image block you want
grafoman replied on at Permalink Reply
Thank you!