How to add a zoom in and contain an image with popout lightbox effect on click with the Divi Theme. In this video we will be showing how to easily create this feature using the inbuilt features of the Divi Theme and a little bit of CSS Code. Today we will be demonstrating how to create this feature using the Divi Image Module and the CUstom CSS Panel.

So follow along with this video to see how to do this with your site.

In this video we will cover:

Adding A Divi Image Module.
Add A Link Or Lightbox Option.
Hide Column Overflow.
Sizing The Image.
Checking Size On Tablet And Phone.
Creating The Zoom On Hover Effect.
Zoom To A Specific Area Of The Image.
Adjusting Transition Timing.

Join us in this series of videos where we explore the fantastic effects you can achieve with the Divi theme. With its versatile modules and effects, you can create eye-catching visuals that enhance the look and user experience of your website.

Using image hover effects in web design offers a range of benefits that enhance the user experience and elevate the visual appeal of a website. Firstly, image hover effects capture users' attention and create interactivity, encouraging them to engage with the content. When users hover over an image, it can transform, reveal additional information, or display a different visual effect, adding an element of surprise and delight. Secondly, hover effects provide a dynamic and engaging browsing experience, allowing users to explore the website with a sense of curiosity and discovery. They can also convey additional information or context about an image without cluttering the layout. Lastly, image hover effects add a layer of professionalism and creativity to the design, making the website more visually appealing and memorable.


THEMES AND PLUGINS USED IN THESE VIDEOS:

Try out the Divi theme: [ Ссылка ]

Divi Supreme Modules Pro Plugin 10% Off: [ Ссылка ]

Divi Supreme Modules Light Plugin: [ Ссылка ]


MY YOUTUBE PLAYLISTS:

Divi Supreme Modules Playlist: [ Ссылка ]?

v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Playlist page for more videos on this: [ Ссылка ]

Full Ecommerce Site Build Playlist: [ Ссылка ]?

v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Contact Form With File Upload Video: [ Ссылка ]

Divi 4 Theme Create An Ecommerce Store In One Hour: [ Ссылка ]

Check out our playlist page for more videos on this: [ Ссылка ]

Sub: [ Ссылка ]

Don't forget to drop any questions below, I will do my best to answer or make a video demo for you!

MY BLOG

[ Ссылка ]


CSS CODE USED TODAY

height: 175px;

CHAPTERS

00:00 Introduction
00:37 Adding A Divi Image Module.
01:15 Add A Link Or Lightbox Option.
01:45 Hide Column Overflow.
02:30 Sizing The Image.
03:39 Checking Size On Tablet And Phone.
05:39 Creating The Zoom On Hover Effect.
07:38 Zoom To A Specific Area Of The Image.
08:19 Adjusting Transition Timing.


RECOMMENDED PLAYLISTS

Elementor Ecommerce Store: [ Ссылка ]

Divi Snippets: [ Ссылка ]

Divi 4 Ecommerce Store: [ Ссылка ]

Bootstrap 4 Basics: [ Ссылка ]

Elementor: [ Ссылка ]

WordPress Tips: [ Ссылка ]


Subscribe: [ Ссылка ]

Disclaimer: Some of these links are affiliate links where I'll earn a small commission if you make a purchase at no additional cost to you.

#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite #Divi #elementor

свернуть