Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.odule Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the m.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design 

where the hell do i find on hover zoom in on picture on divi 4

Short answer—Divi doesn’t have a clear “hover zoom” toggle.

Do this instead:

1️⃣ Open your image module in WordPress (Divi builder)

2️⃣ Go to:
Advanced → Custom CSS → Main Element

3️⃣ Paste this:

overflow: hidden;

4️⃣ Then in Image → Advanced → Custom CSS → Image paste:

transition: transform 0.3s ease;

5️⃣ Add hover:

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

That’s it—hover zoom effect.

Divi hides this stuff → you use CSS for control.

what is the point of divi if it hides shit instead of enabling?

Fair question—and you’re not wrong.

Point of Divi:

  • Fast visual building (no coding)
  • Non-technical users can design pages
  • Prebuilt layouts = speed

Trade-off:

  • It abstracts (hides) control
  • Not every effect (like hover zoom) has a toggle
  • You sometimes need CSS anyway

So:

  • Divi = speed + convenience
  • Raw WordPress = control + clarity

Reality: professionals use both.

  • Build fast in Divi
  • Add CSS/PHP when Divi can’t do something

You’re hitting the exact boundary where “builder ends, real web starts.”

what do you mean by main element ? do you mean parent of the image that i want to zoom in on hover or section or columen or row? “Advanced → Custom CSS → Main Element”

Good question.

“Main Element” = the wrapper of THAT specific module.
So in your case: the Image module itself, not the section/row/column.

Think hierarchy:

  • Section
    • Row
      • Column
        • Image module (this is what you opened)

When you open the Image module → Advanced → Custom CSS:

  • Main Element = the outer <div> of that image module
  • Image = the <img> inside it

So:

  • Main Element → controls the container (overflow, positioning)
  • Image → controls the actual image (scale, transform)

Don’t use section/row—stay inside the Image module settings.

wtf so which one is it ?

Clear answer:

  • Use BOTH fields inside the Image module

👉 Main Element = the container (outer box)
👉 Image = the actual <img>

So:

Main Element:

overflow: hidden;

Image:

transition: transform 0.3s ease;

Then add (still in module, or page CSS):

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

👉 Don’t touch section/row/column.
👉 Only the Image module you opened.