PHP BLOG

A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.



By Mary Lou in Tutorials on July 1, 2020



From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.



At Codrops, we love experimenting with playful hover effects. Back in 2018, we explored a set of fun hover animations for links. We called that Image Reveal Hover Effects and it shows how to make images appear with a fancy animation when hovering items of a menu. After seeing the fantastic portfolio of Marvin Schwaibold, I wanted to try this effect again on a larger menu and add that beautiful swing effect when moving the mouse. Using some filters, this can also be made more dramatic.



If you are interested in other similar effect, have a look at these:



Image Trail Effects

Image Distortion Effects with SVG Filters

Image Dragging Effects

So, today we’ll have a look at how to create this juicy image hover reveal animation:



Some Markup and Styling

We’ll use a nested structure for each menu item because we’ll have several text elements that will appear on page load and hover.



But we’ll not go into the text animation on load or the hover effect so what we are interested in here is how we’ll make the image appear for each item. The first thing I do when I want to make a certain effect is to write up the structure that I need using no JavaScript. So let’s take a look at that:



--이하 생략



출저 : https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/