CODE

Front Image
Back Image

Flip Container - X-Axis

Step 1: Add a class to your Elementor container
 Edit the page with Elementor
Click on the container you want to flip
Go to Advanced β†’ CSS Classes
Add this class πŸ‘‡
flip-x-hover
    /* Flip container on X-axis hover */
.flip-x-hover {
  perspective: 1000px;
}

.flip-x-hover > .e-con-inner {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.flip-x-hover:hover > .e-con-inner {
  transform: rotateX(180deg);
}

Small improvements you can apply (optional)

Softer flip (less dramatic)

.flip-x-hover:hover > .e-con-inner {
  transform: rotateX(90deg);
}

Slight shadow for realism

.flip-x-hover > .e-con-inner {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

Flip Container - Y-Axis

Step 1: Add a class to your Elementor container
 Edit the page with Elementor
Click on the container you want to flip
Go to Advanced β†’ CSS Classes
Add this class πŸ‘‡
flip-y-hover
/* Flip container on Y-axis hover */
.flip-y-hover {
  perspective: 1000px;
}

.flip-y-hover > .e-con-inner {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.flip-y-hover:hover > .e-con-inner {
  transform: rotateY(180deg);
}

Small improvements you can apply (optional)

Softer flip (less dramatic)

.flip-y-hover:hover > .e-con-inner {
  transform: rotateY(90deg);
}

Slight shadow for realism

.flip-y-hover > .e-con-inner {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

Rotate-on-hover container

Step 1: Add a class to your Elementor container
 Edit the page with Elementor
Click on the container you want to flip
Go to Advanced β†’ CSS Classes
Add this class πŸ‘‡
rotate-hover

Add the CSS code

 /* Rotate container on hover */
.rotate-hover {
  transition: transform 0.4s ease;
}

.rotate-hover:hover {
  transform: rotate(3deg);
}

Rotate the other direction

.rotate-hover:hover {
  transform: rotate(-3deg);
}

3D rotate (more depth)

.rotate-hover {
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}

.rotate-hover:hover {
  transform: rotateY(10deg);
}

Rotate + lift (very popular)

.rotate-hover {
  transition: transform 0.4s ease;
}

.rotate-hover:hover {
  transform: rotate(2deg) translateY(-6px);
}

Zoom-hover container

Step 1: Add a class to your Elementor container
 Edit the page with Elementor
Click on the container you want to flip
Go to Advanced β†’ CSS Classes
Add this class πŸ‘‡
zoom-hover

Add the CSS code

/* Zoom container on hover */
.zoom-hover {
  transition: transform 0.35s ease;
}

.zoom-hover:hover {
  transform: scale(1.06);
}

Subtle zoom (very professional)

.zoom-hover:hover {
  transform: scale(1.03);
}

Zoom + lift (popular combo)

.zoom-hover:hover {
  transform: scale(1.05) translateY(-6px);
}

Zoom only image inside container

.zoom-hover img {
  transition: transform 0.4s ease;
}

.zoom-hover:hover img {
  transform: scale(1.1);
}

Important tips (avoid common mistakes)

.zoom-hover {
  overflow: hidden;
}

Glow-on-Hover Container

Step 1: Add a class to your Elementor container
 Edit the page with Elementor
Click on the container you want to flip
Go to Advanced β†’ CSS Classes
Add this class πŸ‘‡
glow-hover

Add the CSS code

/* Glow effect on container hover */
.glow-hover {
  transition: box-shadow 0.35s ease;
}

.glow-hover:hover {
  box-shadow: 0 0 20px rgba(0, 140, 255, 0.6);
}

Soft professional glow (recommended)

.glow-hover:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

Strong neon glow (dark themes)

.glow-hover:hover {
  box-shadow: 0 0 30px rgba(0, 255, 200, 0.8);
}

Glow + slight zoom (very popular)

.glow-hover {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.glow-hover:hover {
  box-shadow: 0 0 25px rgba(0, 140, 255, 0.6);
  transform: scale(1.04);
}

Blink once on Hover effect

Step 1: Add a class to your Elementor container
 Edit the page with Elementor
Click on the container you want to flip
Go to Advanced β†’ CSS Classes
Add this class πŸ‘‡
blink-once-hover

Add the CSS code

/* Blink once on hover */
.blink-once-hover:hover {
  animation: blinkOnce 0.6s linear 1;
}

@keyframes blinkOnce {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  50%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 1; }
}

Softer blink (more professional)

@keyframes blinkOnce {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

Blink + glow (nice combo)

.blink-once-hover:hover {
  animation: blinkOnce 0.6s linear 1;
  box-shadow: 0 0 15px rgba(0, 140, 255, 0.5);
}

Zoom only image inside container

.zoom-hover img {
  transition: transform 0.4s ease;
}

.zoom-hover:hover img {
  transform: scale(1.1);
}

Important tips (avoid common mistakes)

.zoom-hover {
  overflow: hidden;
}

Follow us

Facebook X-twitter Youtube

Pages

Information