How to Create a Wave Hover Effect in Elementor Gallery: Full Tutorial

In web design, hover effect is a very popular dynamic effect that can be displayed when the user moves the mouse over an image or button.Wave hover effectIt is a soft and attractive animation effect that simulates the undulation of waves, which makes the image show a dynamic effect similar to water waves when hovering. In this article, we will take you step by step to learn how to realize this effect in Elementor library.

preliminary

To create a wave hover effect in Elementor, you need the following:

1. Elementor plug-in (software component): Make sure the Elementor plugin is installed and activated. If you need more advanced styles, you can use the Elementor Pro, but this tutorial can be implemented in the free version of Elementor.
2. Custom CSS: The wave hover effect requires some custom CSS, so make sure your theme or version of Elementor allows for custom CSS. if using Elementor Pro, you can add custom CSS directly to the element'sCustomizing the CSS sectionAdd code.

Steps to create a wave hover effect

Step 1: Add the Elementor Gallery Widget

1. Open the WordPress dashboard and navigate to Pages > Add New Page, or edit an existing page.
2. Enter Elementor editor (software)Drag and drop in the left toolbar. image archive Widget (Gallery) to the page and then upload the images you wish to display.

3. Configure the layout of the gallery to fit your design needs.

Step 2: Add class name to the image

To make it easier to apply the wave effect to a specific image, we need to add aCustom Class NamesThis allows the CSS code to work only on these images. This allows the CSS code to work only on these images.

1. Select the Gallery widget and click high level Tags.

2. exist CSS class In the field, enter a custom class name, for example wave-hoverThe

Step 3: Add custom CSS code

Next, we will implement the wave hover effect via CSS. Below is the CSS code, which can be added to the custom CSS section of the page, or to the custom CSS of the theme (if your Elementor doesn't support adding CSS directly).

/* Base style: set hover effect image */
.wave-hover img {
  display: block; /* Make sure the image animates properly */
  transition: transform 0.4s ease-in-out; /* Add a smooth transition effect */
  will-change: transform; /* Optimize performance by telling the browser that the transform will be changed */
}

/* Wave hover effect */
.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
  animation: wave 0.6s ease-in-out infinite; /* Apply animation */
}

/* Define the wave animation */
@keyframes wave {
  0%, 100% {
    transform: translateY(-10px) rotate(2deg); /* start and end points are the same, smooth loop */
  }
  25% {
    transform: translateY(-15px) rotate(-2deg); /* Shift image up, reverse slightly */
  }
  50% {
    transform: translateY(0px) rotate(2deg); /* image back to initial rotation */
  }
  75% {
    transform: translateY(-5px) rotate(-1deg); /* The image is shifted down and slightly rotated */
  }
}

Code Description:

• .wave-hover img: This is the default state style, which sets the transition effect of the image, allowing a smooth transition to the wave effect on hover.
• .wave-hover img:hover: When the mouse hovers over the image, the image moves up slightly, rotates and zooms in, and starts a wave animation.
• @keyframes wave: Defines the keyframes of the wave animation so that the image undulates up and down on hover, creating a wave effect.

Step 4: Save and Preview Page

After completing the above steps, save the page and click Preview. In the preview page, you will see that when the mouse is hovered over the image, the image produces theWave-like up and down effectThe newest version of the program is a unique and dynamic visual experience for the user.

Optional step: Adjusting effect parameters

The effect parameters can be fine-tuned according to design requirements:

• wave amplitude: By adjusting translateY() value controls the magnitude of the wave effect. Larger values produce more pronounced waves.
• Animation speed: Adjustments animation The duration in the attribute (e.g. 0.6s) can control the speed of the wave effect.
• angle of rotation:: Change rotate() value adjusts the rotation angle of the image.

Further optimization: adding shadow effects

To add depth to the effect, you can also add shadows to the hover effect to make the image appear more three-dimensional as it fluctuates.

.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
  animation: wave 0.6s ease-in-out infinite;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0, 0.2);
}

summarize

The hover effect is a popular dynamic effect in web design that demonstrates interactivity when the user moves the mouse over an image or button. The wave hover effect simulates the ebb and flow of waves, giving the image a watery, dynamic effect when hovered over. This article describes how to implement this effect in the Elementor library, including setting up an image library, adding custom class names, writing CSS wave animation code, and adjusting the magnitude, speed, and shadows of the effect as needed to make a website more vivid and engaging for users.