Welcome to Day 60 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


For a long time I have always wanted to create a rollover image. The reason why I didn’t bother to learn how to do it is because I thought it would take me time to do and I had to learn even more coding. I was really surprised when I found out how easy it was so I decided to share this with the community. I hope this quick and easy trick can help you create your own rollover images.

How to Create a Rollover Image Effect with HTML — Divi Nation Short

In this episode if Divi Nation I show you step by step how to make a Rollover Image with HTML. You do not need any special code or plugins for this. The code you need to follow along with the tutorial is:


Subscribe To Our Youtube Channel

All Subscription Options:

Summary: How to Create a Rollover Image Effect with HTML

1

Start by preparing your images making sure they are the same size. I used Photoshop in my example but you can use any photo manipulation software. Save the two images as .jpegs.

2

Next upload the images to the media library. Remember that you have to be logged into your Wordress admin.

3

You are going to need the url at this stage so click on one of the images, on the right you will see the url. Copy this url for your first image.

4

Go to the page where you need place the rollover image and inset the text module. Click on the settings of the module and enter this code:


Replace “IMAGE1” and “IMAGE2” with the url of the images from your media library. Save and preview the page.

5

Finally mouse over the image and you should see the rollover.

6

Next Week on the Divi Nation Podcast

Next week we will continue to interview members of the Elegant Themes design and development teams to talk about their WordPress stories, how they came to join us, and what kind of work they’re doing on Divi 3.0.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 60

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE; text-decoration: none;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post How to Create a Rollover Image Effect with HTML — Divi Nation Short appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply