First off you need to have some knowledge on how and where to insert this code within the realms of both WordPress and Divi to make it work.

In WordPress –

You can go to Appearance and Editor which should take you directly to your stylesheet opened in the editor itself. CAUTION: You should be using a child theme for these additions! If you are using a child theme then and this is your first trip to the editor then the stylesheet should be mostly blank with the exception of some code at the top that MUST REMAIN there. You will insert the new code below it.

This is where you will insert the CSS instructions from iHover by doing a copy/paste. Trying to paste this much code into the Divi custom CSS box in the ePanel will make you go crazy. So don’t do it.

In Divi –

You will need to insert the HTML into the Code module that contains all the div class names and assignments. Once again, DO NOT attempt to paste all this code into the Divi custom CSS box if you wish to keep your sanity.

You need to have the image uploaded to the Media Library and you need to have the URL to that image handy so you can insert it in place of the image reference in the sample HTML code from iHover.

It’s doubtful that you wish to use ALL the effects available. Therefore you don’t need to copy the entire CSS file from iHover. Plus, loading all that extra code will just slow your page load times down by loading unnecessary stuff if you’re only using a single effect. So, we want to pluck out of their CSS file just the stuff we need. Here’s the minimum that you’ll need to get:

First, the basic code handling the global instructions for the effects. This should be about the first 100 lines of code from the CSS file.

.ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover {
  text-decoration: none;
}
.ih-item img {
  width: 100%;
  height: 100%;
}

.ih-item.circle {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
}
.ih-item.circle .img {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
}
.ih-item.circle .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
  border-radius: 50%;
}
.ih-item.circle .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.square {
  position: relative;
  width: 316px;
  height: 216px;
  border: 8px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ih-item.square .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.circle.effect1 .spinner {
  width: 230px;
  height: 230px;
  border: 10px solid #ecab18;
  border-right-color: #1ad280;
  border-bottom-color: #1ad280;
  border-radius: 50%;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
  position: absolute;
  top: 10px;
  bottom: 0;
  left: 10px;
  right: 0;
  width: auto;
  height: auto;
}

If you just want Square Effect #4 (as an example) then that’s all the code you need from the CSS file. If you search down to about line #101 you will see where the name and number of the effects start to appear in the form of something like this:

.1h-item.circle.effect1

That is effect #1 for the circle effect. There will be several instructions following this line that contain effect1 in it. You need ALL of these if you intend to use effect #1 or all of whatever it is of the effect you wish to use. For example, line(s) 101 to 148 are all needed in order to use Effect #1 for circles. Copy and paste these into your child theme’s stylesheet BELOW where you pasted the global CSS for the iHover effects.

This is the code for Square Effect #5 (example on right) just to show you what needs to be copy/pasted:

.ih-item.square.effect5.colored .info {
  background: #1a4a72;
}
.ih-item.square.effect5.colored .info h3 {
  background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect5 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.ih-item.square.effect5 .info {
  background: #333333;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect5 .info h3 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: #111111;
  margin: 30px 0 0 0;
}
.ih-item.square.effect5 .info p {
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #bbb;
  padding: 20px 20px 20px;
  text-align: center;
}
.ih-item.square.effect5 a:hover .img {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  transition-delay: 0;
}
.ih-item.square.effect5 a:hover .info {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.ih-item.square.effect5.left_to_right .info {
  -webkit-transform: scale(0) rotate(-180deg);
  -moz-transform: scale(0) rotate(-180deg);
  -ms-transform: scale(0) rotate(-180deg);
  -o-transform: scale(0) rotate(-180deg);
  transform: scale(0) rotate(-180deg);
}

.ih-item.square.effect5.right_to_left .info {
  -webkit-transform: scale(0) rotate(180deg);
  -moz-transform: scale(0) rotate(180deg);
  -ms-transform: scale(0) rotate(180deg);
  -o-transform: scale(0) rotate(180deg);
  transform: scale(0) rotate(180deg);
}

Now you need to copy/paste the HTML into your page that contains the div classes and code to display the image and the effects. From the example page (located here: https://gudh.github.io/ihover/dist/) find the effect you want and you’ll see the HTML code for each just below the demos. The part you need is just this:

    

        

        

          
Heading here
          
Description goes here
        
    

Basically the HTML between the “normal” and “end normal” comment lines. This is the code you will copy/paste into the Code module you’ve inserted into your page using the Divi builder. NOTE: This snippet is for Effect #5 only. The HTML will be different for each effect. You must copy/paste the HTML for the effect you want.

You MUST replace the with your URL to your image that you did in Step #1

Now, just change the text that refers to Headline Here and Description. These lines here:

Heading here
Description goes here

To whatever you want them to say. Be advised, though, these are space limited so you can’t get too crazy with the amount of text. Short and sweet!

Hit the Save & Exit and preview your page to see if the effects work.