Divi Theme Text Over Image Using CSS
How to add text over your images, and create a hover effect using the after CSS pseudo element with the Divi Theme. In this video we will be showing how to create this using some CSS Code (Below). Today we will be demonstrating how to create this feature with the Divi Image Module.
So follow along with this video to see how to create this with your Divi site.
In this video we will cover:
Adding A Divi Image Module.
Using The Custom CSS panel.
Writing The CSS Code.
Duplicating The Effect.
Adding Multiple Lines Of Text.
Creating A Single Line.
Creating A Hover Effect.
Hiding The Image Title
We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.
Having text over images in web design offers several benefits that enhance the visual appeal and user experience. Firstly, it allows for a compelling and engaging presentation of content, capturing attention and conveying messages effectively. Text over images can provide context and meaning, guiding users through the website's narrative. It creates a visually rich and dynamic layout, adding depth and visual interest to the design. Moreover, it enables designers to combine text and imagery seamlessly, creating a cohesive and integrated design concept. By strategically placing text over images, important information can be highlighted, improving readability and guiding user focus. Overall, text over images adds a layer of creativity and aesthetics to web design, making it visually captivating and impactful.
Get the Facebook Embed Code Here: / page-plugin
THEMES AND PLUGINS USED IN THESE VIDEOS:
Try out the Divi theme: https://bit.ly/TryDiviNow
Divi Supreme Modules Pro Plugin 10% Off: https://bit.ly/DiviSupremeCoupon
Divi Supreme Modules Light Plugin: https://bit.ly/SupremeFreeVersion
MY YOUTUBE PLAYLISTS:
Divi Supreme Modules Playlist: / watch
v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: / system22net
Full Ecommerce Site Build Playlist: / watch
v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: • Divi Theme Contact Form With File Upl...
Divi 4 Theme Create An Ecommerce Store In One Hour: • Divi 4 Theme Create An Ecommerce Stor...
Check out our playlist page for more videos on this: / system22net
Sub: / @system22
Don't forget to drop any questions below, I will do my best to answer or make a video demo for you!
MY BLOG
https://web-design-and-tech-tips.com
CSS CODE USED TODAY
/* Text Over Image - Put in After Box*/
content:"This Is A Red Beach";
position:absolute;
top:93%;
left:50%;
color:#fff;
font-size:20px;
transform:translate(-50%, -50%);
font-weight:bold;
background:#00000050;
padding:15px 10px;
/* With Hover Effect - Put in After Box Desktop*/
content:"Pretty Houses On The Water";
position:absolute;
top:93%;
left:50%;
color:transparent;
font-size:20px;
transform:translate(-50%, -50%);
font-weight:bold;
background:#00000000;
padding:15px 10px;
width:90%;
text-align:center;
transition-duration: .7s;
/* With Hover Effect - Put in After Box Hover */
color:#fff;
background:#00000050;
CHAPTERS
00:00 Introduction
00:46 Adding A Divi Image Module.
01:22 Using The Custom CSS panel.
01:39 Writing The CSS Code.
06:31 Duplicating The Effect.
07:11 Adding Multiple Lines Of Text.
08:32 Creating A Single Line.
09:21 Creating A Hover Effect.
12:00 Hiding The Image Title.
12:34 Results.
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
Watch video Divi Theme Text Over Image Using CSS online without registration, duration hours minute second in high quality. This video was added by user System 22 Web Design | Divi Theme Elementor WP 10 May 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,915 once and liked it 65 people.