Circle Hover Effects with CSS Transitions
Originally Created By Codrops

If you have been looking for some easy and cool CSS effects for your sites, then look no further as we are going to give you seven, yes SEVEN effects that will add some cool bling to your site(s)!!! Now if you have been looking for CSS tutorials on the ‘Net, I am sure you have heard of Codrops either through the search engine searches or the Facebook groups. Let me tell you, these guys write some of the best CSS articles out there and have for years!! We are not going to show you how to put these together this time as we have in past tutorials, but instead we will give you the .json files to download as well as the CSS to add to your Divi site. It has been tested in both the custom CSS dialog box under the Divi Theme Options as well as the style sheet. For beginners, we recommend using the custom CSS dialog box, but the more experienced users might prefer putting the code in the style.css for easier troubleshooting.

If you have any problems after going through this tutorial, please review the steps again to make sure everything is placed right. If you do need to ask for assistance, please make sure you have a live URL, as screenshots will not be of any help to us. If these requirements are met, and you still need assistance, please leave a comment at the end of this tutorial and we will be alerted via email and we’ll assist you as time permits.

We hope you like this tutorial, and remember; we try our best to introduce you to CSS and not only use our tutorials, but play around, break them, fix them, learn from them, and above all… HAVE FUN!!!

One more thing, before we get started, please take a moment to read the original authors licensing and Terms of Use clauses below. Please adhere to them and be a respectful designer / developer. These people put a lot of hard work, time, and effort in to making these and we should be thankful they share them without charge.

Codrops – Licensing & Terms of Use

Below are all the examples that you can create in this tutorial. Be creative, have fun, and make them your own!!

EXAMPLE 1

Right click on link below and choose Save As

Click to download Example 1 .JSON file

EXAMPLE 2

Right click on link below and choose Save As

Click to download Example 2 .JSON file

EXAMPLE 3

Right click on link below and choose Save As

Click to download Example 3 .JSON file

EXAMPLE 4

Right click on link below and choose Save As

Click to download Example 4 .JSON file

EXAMPLE 5

Right click on link below and choose Save As

Click to download Example 5 .JSON file

EXAMPLE 6

Right click on link below and choose Save As

Click to download Example 6 .JSON file

EXAMPLE 7

Right click on link below and choose Save As

Click to download Example 7 .JSON file

Disclaimer: We originally set out for Divihelp.com to not contain css tips and tricks, but I could not help myself. Teaching people something that, for the most part, is copying and pasting the code, I could not resist. Also, DO NOT attempt these tutorials on a live site in case it breaks something. Divi Help is not liable for the code or anything that can happen to your site.While we have not had anything bad happen, that does not mean that it cannot. We do not say this to scare you, but as a formality, and as with any code, proceed with caution.

STEP 1
We are offering 7 .json files for download, each laid out in a single section set as a fullwidth row, with the default html code already contained within them.

NOTE: The links inside each of the modules can be customized and uses standard html. Before asking “How do I…?” there are plenty of resources on the ‘Net to assist you. If you cannot figure these out, please contact us, but try to figure it out first. That is part of the learning process as a designer / developer, and we are trying to encourage you, not discourage you. We supply the basics to get you started to learn and to grow.

All in one circle hover effects

Circle Hover Effect 1

Circle Hover Effect 2

Circle Hover Effect 3

Circle Hover Effect 4

Circle Hover Effect 5

Circle Hover Effect 6

Circle Hover Effect 7

STEP 2
Scroll to the examples section at the top of the page and pick which effect you would like to start with. Choose one of them or all of them. All .json files should be imported into the Divi Library.

So lets get started!!!

STEP 3
Before we get to the CSS, we need to prepare some images. The optimal image size to use for these hovers is 220 x 220 pixels. You will also need to know how to locate the path to each image to change the image path in the CSS. If you do not know how to locate the path for your image, click on the Media link on the main WordPress menu on the left, then click on the image. See screenshots below.

Media Button

The page import button is the first one in the screen shot (the up/down arrow).

Media URL Path

STEP 4
Now for the magic… the CSS!!! Remember, there a few different ways add the CSS. For beginners, we recommend putting the CSS in your Divi Theme Options box. For the more advanced users, you can add the CSS to your style.css, but only do so if you have a child theme in place and active.

NOTE:If you have existing CSS in the custom CSS box, be sure you copy that code and paste it in a local document (make sure you use a text document like Notpad. Microsoft Word and other programs like it, tend to insert special formatting that can mess up the code with hidden characters) should something go wrong. This is a best practice and you should get used to as a designer/ developer if you are going to use the Custom CSS Box.

In the codebox below, click on the second to the last button in the toolbar to highlight all of the code. Next press ctrl+c (on Windows) or cmd+c (on Mac) and then paste the code in a new text document. We are going to change the image path in the next step.

* Begin Codrops rounded hover */ 

  /* General CSS */ 

.ch-grid { 
        margin: 20px 0 0 0; 
        padding: 0; 
        list-style: none; 
        display: block; 
        text-align: center; 
        width: 100%; 
} 

.ch-grid:after, 
.ch-item:before { 
        content: ''; 
    display: table; 
} 

.ch-grid:after { 
        clear: both; 
} 

.ch-grid li { 
        width: 220px; 
        height: 220px; 
        display: inline-block; 
        margin: 20px; 
} 

  /* End General CSS */ 

  /* Begin Demo 1 */ 

.ch-item { 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        position: relative; 
        cursor: default; 
        box-shadow: 
                inset 0 0 0 16px rgba(255,255,255,0.6), 
                0 1px 2px rgba(0,0,0,0.1); 
                
        -webkit-transition: all 0.4s ease-in-out; 
        -moz-transition: all 0.4s ease-in-out; 
        -o-transition: all 0.4s ease-in-out; 
        -ms-transition: all 0.4s ease-in-out; 
        transition: all 0.4s ease-in-out; 
} 

.ch-img-1 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/1.jpg); 
} 

.ch-img-2 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/2-1.jpg); 
} 

.ch-img-3 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/3-1.jpg); 
} 

.ch-info { 
        position: absolute; 
        background: rgba(63,147,147, 0.8); 
        width: inherit; 
        height: inherit; 
        border-radius: 50%; 
        opacity: 0; 
        
        -webkit-transition: all 0.4s ease-in-out; 
        -moz-transition: all 0.4s ease-in-out; 
        -o-transition: all 0.4s ease-in-out; 
        -ms-transition: all 0.4s ease-in-out; 
        transition: all 0.4s ease-in-out; 
        
        -webkit-transform: scale(0); 
        -moz-transform: scale(0); 
        -o-transform: scale(0); 
        -ms-transform: scale(0); 
        transform: scale(0); 
        
        -webkit-backface-visibility: hidden; 

} 

.ch-info h3 { 
        color: #fff; 
        text-transform: uppercase; 
        letter-spacing: 2px; 
        font-size: 22px; 
        margin: 0 30px; 
        padding: 45px 0 0 0; 
        height: 140px; 
        font-family: 'Open Sans', Arial, sans-serif; 
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3); 
} 

.ch-info p { 
        color: #fff; 
        padding: 10px 5px; 
        font-style: italic; 
        margin: 0 30px; 
        font-size: 12px; 
        border-top: 1px solid rgba(255,255,255,0.5); 
        opacity: 0; 
        -webkit-transition: all 1s ease-in-out 0.4s; 
        -moz-transition: all 1s ease-in-out 0.4s; 
        -o-transition: all 1s ease-in-out 0.4s; 
        -ms-transition: all 1s ease-in-out 0.4s; 
        transition: all 1s ease-in-out 0.4s; 
} 

.ch-info p a { 
        display: block; 
        color: #fff; 
        color: rgba(255,255,255,0.7); 
        font-style: normal; 
        font-weight: 700; 
        text-transform: uppercase; 
        font-size: 9px; 
        letter-spacing: 1px; 
        padding-top: 4px; 
        font-family: 'Open Sans', Arial, sans-serif; 
} 

.ch-info p a:hover { 
        color: #fff222; 
        color: rgba(255,242,34, 0.8); 
} 

.ch-item:hover { 
        box-shadow: 
                inset 0 0 0 1px rgba(255,255,255,0.1), 
                0 1px 2px rgba(0,0,0,0.1); 
} 
.ch-item:hover .ch-info { 
        -webkit-transform: scale(1); 
        -moz-transform: scale(1); 
        -o-transform: scale(1); 
        -ms-transform: scale(1); 
        transform: scale(1); 
        opacity: 1; 
} 

.ch-item:hover .ch-info p { 
        opacity: 1; 
} 

  /* End Demo 1 */ 

  /* Begin Demo 2 */ 

.ch-item2 { 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        position: relative; 
        cursor: default; 
        box-shadow: 
                inset 0 0 0 0 rgba(200,95,66, 0.4), 
                inset 0 0 0 16px rgba(255,255,255,0.6), 
                0 1px 2px rgba(0,0,0,0.1); 
                
        -webkit-transition: all 0.4s ease-in-out; 
        -moz-transition: all 0.4s ease-in-out; 
        -o-transition: all 0.4s ease-in-out; 
        -ms-transition: all 0.4s ease-in-out; 
        transition: all 0.4s ease-in-out; 
} 

.ch-img-4 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/4-1.jpg); 
} 

.ch-img-5 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/5-1.jpg); 
} 

.ch-img-6 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/6-1.jpg); 
} 

.ch-info2 { 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        opacity: 0; 
        
        -webkit-transition: all 0.4s ease-in-out; 
        -moz-transition: all 0.4s ease-in-out; 
        -o-transition: all 0.4s ease-in-out; 
        -ms-transition: all 0.4s ease-in-out; 
        transition: all 0.4s ease-in-out; 
        
        -webkit-transform: scale(0); 
        -moz-transform: scale(0); 
        -o-transform: scale(0); 
        -ms-transform: scale(0); 
        transform: scale(0); 
        
        -webkit-backface-visibility: hidden; /*for a smooth font */ 

} 

.ch-info2 h3 { 
        color: #fff; 
        text-transform: uppercase; 
        position: relative; 
        letter-spacing: 2px; 
        font-size: 22px; 
        margin: 0 30px; 
        padding: 65px 0 0 0; 
        height: 110px; 
        font-family: 'Open Sans', Arial, sans-serif; 
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3); 
} 

.ch-info2 p { 
        color: #fff; 
        padding: 10px 5px; 
        font-style: italic; 
        margin: 0 30px; 
        font-size: 12px; 
        border-top: 1px solid rgba(255,255,255,0.5); 
} 

.ch-info2 p a { 
        display: block; 
        color: #fff; 
        color: rgba(255,255,255,0.7); 
        font-style: normal; 
        font-weight: 700; 
        text-transform: uppercase; 
        font-size: 9px; 
        letter-spacing: 1px; 
        padding-top: 4px; 
        font-family: 'Open Sans', Arial, sans-serif; 
} 

.ch-info2 p a:hover { 
        color: #fff222; 
        color: rgba(255,242,34, 0.8); 
} 

.ch-item2:hover { 
        box-shadow: 
                inset 0 0 0 110px rgba(200,95,66, 0.4), 
                inset 0 0 0 16px rgba(255,255,255,0.8), 
                0 1px 2px rgba(0,0,0,0.1); 
} 

.ch-item2:hover .ch-info2 { 
        opacity: 1; 
        
        -webkit-transform: scale(1); 
        -moz-transform: scale(1); 
        -o-transform: scale(1); 
        -ms-transform: scale(1); 
        transform: scale(1);         
} 
  /*End Demo 2 */ 

  /* Begin Demo 3 */ 


.ch-item3 { 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        position: relative; 
        cursor: default; 
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
} 

.ch-thumb3 { 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        overflow: hidden; 
        position: absolute; 
        box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); 
        
        -webkit-transform-origin: 95% 40%; 
        -moz-transform-origin: 95% 40%; 
        -o-transform-origin: 95% 40%; 
        -ms-transform-origin: 95% 40%; 
        transform-origin: 95% 40%; 
        
        -webkit-transition: all 0.3s ease-in-out; 
        -moz-transition: all 0.3s ease-in-out; 
        -o-transition: all 0.3s ease-in-out; 
        -ms-transition: all 0.3s ease-in-out; 
        transition: all 0.3s ease-in-out; 
} 

.ch-thumb3:after { 
        content: ''; 
        width: 8px; 
        height: 8px; 
        position: absolute; 
        border-radius: 50%; 
        top: 40%; 
        left: 95%; 
        margin: -4px 0 0 -4px; 
        background: rgb(14,14,14); 
        background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%); 
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1))); 
        background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); 
        background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); 
        background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); 
        background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); 
        box-shadow: 0 0 1px rgba(255,255,255,0.9); 
} 

.ch-img-7 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/7-1.jpg); 
        z-index: 12; 
} 

.ch-img-8 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/8-1.jpg); 
        z-index: 11; 
} 

.ch-img-9 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/9-1.jpg); 
        z-index: 10; 
} 

.ch-info3 { 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        overflow: hidden; 
        background: #c9512e url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/noise.png); 
        box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); 
} 

.ch-info3 h3 { 
        color: #fff; 
        text-transform: uppercase; 
        position: relative; 
        letter-spacing: 2px; 
        font-size: 18px; 
        margin: 0 60px; 
        padding: 22px 0 0 0; 
        height: 85px; 
        font-family: 'Open Sans', Arial, sans-serif; 
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3); 
} 

.ch-info3 p { 
        color: #fff; 
        padding: 10px 5px; 
        font-style: italic; 
        margin: 0 30px; 
        font-size: 12px; 
        border-top: 1px solid rgba(255,255,255,0.5); 
} 

.ch-info3 p a { 
        display: block; 
        color: #333; 
        width: 80px; 
        height: 80px; 
        background: rgba(255,255,255,0.3); 
        border-radius: 50%; 
        color: #fff; 
        font-style: normal; 
        font-weight: 700; 
        text-transform: uppercase; 
        font-size: 9px; 
        letter-spacing: 1px; 
        padding-top: 24px; 
        margin: 7px auto 0; 
        font-family: 'Open Sans', Arial, sans-serif; 
        opacity: 0; 
        
        -webkit-transition: 
                -webkit-transform 0.3s ease-in-out 0.2s, 
                opacity 0.3s ease-in-out 0.2s, 
                background 0.2s linear 0s; 
        -moz-transition: 
                -moz-transform 0.3s ease-in-out 0.2s, 
                opacity 0.3s ease-in-out 0.2s, 
                background 0.2s linear 0s; 
        -o-transition: 
                -o-transform 0.3s ease-in-out 0.2s,
                opacity 0.3s ease-in-out 0.2s, 
                background 0.2s linear 0s; 
        -ms-transition: 
                -ms-transform 0.3s ease-in-out 0.2s, 
                opacity 0.3s ease-in-out 0.2s, 
                background 0.2s linear 0s; 
        transition: 
                transform 0.3s ease-in-out 0.2s, 
                opacity 0.3s ease-in-out 0.2s, 
                background 0.2s linear 0s; 
                
        -webkit-transform: translateX(60px) rotate(90deg); 
        -moz-transform: translateX(60px) rotate(90deg); 
        -o-transform: translateX(60px) rotate(90deg); 
        -ms-transform: translateX(60px) rotate(90deg); 
        transform: translateX(60px) rotate(90deg); 
                
        -webkit-backface-visibility: hidden; 
} 

.ch-info3 p a:hover { 
        background: rgba(255,255,255,0.5); 
} 
.ch-item3:hover .ch-thumb3 { 
        box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); 
        -webkit-transform: rotate(-110deg); 
        -moz-transform: rotate(-110deg); 
        -o-transform: rotate(-110deg); 
        -ms-transform: rotate(-110deg); 
        transform: rotate(-110deg); 
} 
.ch-item3:hover .ch-info3 p a{ 
        opacity: 1; 
        -webkit-transform: translateX(0px) rotate(0deg); 
        -moz-transform: translateX(0px) rotate(0deg); 
        -o-transform: translateX(0px) rotate(0deg); 
        -ms-transform: translateX(0px) rotate(0deg); 
        transform: translateX(0px) rotate(0deg); 
} 

  /*End Demo 3 */ 

  /* Begin Demo 4 */ 

.ch-item4 { 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        position: relative; 
        box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
        cursor: default; 
} 

.ch-info-wrap4{ 
        position: absolute; 
        width: 180px; 
        height: 180px; 
        border-radius: 50%; 

        -webkit-perspective: 800px; 
        -moz-perspective: 800px; 
        -o-perspective: 800px; 
        -ms-perspective: 800px; 
        perspective: 800px; 

        -webkit-transition: all 0.4s ease-in-out; 
        -moz-transition: all 0.4s ease-in-out; 
        -o-transition: all 0.4s ease-in-out; 
        -ms-transition: all 0.4s ease-in-out; 
        transition: all 0.4s ease-in-out; 

        top: 20px; 
        left: 20px; 
        background: #f9f9f9 url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/bg.jpg); 
        box-shadow: 
                0 0 0 20px rgba(255,255,255,0.2), 
                inset 0 0 3px rgba(115,114, 23, 0.8); 

} 

.ch-info4{ 
        position: absolute; 
        width: 180px; 
        height: 180px; 
        border-radius: 50%; 

        -webkit-transition: all 0.4s ease-in-out; 
        -moz-transition: all 0.4s ease-in-out; 
        -o-transition: all 0.4s ease-in-out; 
        -ms-transition: all 0.4s ease-in-out; 
        transition: all 0.4s ease-in-out; 
                
        -webkit-transform-style: preserve-3d; 
        -moz-transform-style: preserve-3d; 
        -o-transform-style: preserve-3d; 
        -ms-transform-style: preserve-3d; 
        transform-style: preserve-3d; 

} 

.ch-info4 > div { 
        display: block; 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        background-position: center center; 

        -webkit-backface-visibility: hidden; 
        -moz-backface-visibility: hidden; 
        -o-backface-visibility: hidden; 
        -ms-backface-visibility: hidden; 
        backface-visibility: hidden; 
} 

.ch-info4 .ch-info-back4 { 
        -webkit-transform: rotate3d(0,1,0,180deg); 
        -moz-transform: rotate3d(0,1,0,180deg); 
        -o-transform: rotate3d(0,1,0,180deg); 
        -ms-transform: rotate3d(0,1,0,180deg); 
        transform: rotate3d(0,1,0,180deg); 
        
        background: #000; 
} 

.ch-img-10 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/10-1.jpg); 
} 

.ch-img-11 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/11-1.jpg); 
} 

.ch-img-12 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/12.jpg); 
} 

.ch-info4 h3 { 
        color: #fff; 
        text-transform: uppercase; 
        letter-spacing: 2px; 
        font-size: 14px; 
        margin: 0 15px; 
        padding: 40px 0 0 0; 
        height: 90px; 
        font-family: 'Open Sans', Arial, sans-serif; 
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3); 
} 

.ch-info4 p { 
        color: #fff; 
        padding: 10px 5px; 
        font-style: italic; 
        margin: 0 30px; 
        font-size: 12px; 
        border-top: 1px solid rgba(255,255,255,0.5); 
} 

.ch-info4 p a { 
        display: block; 
        color: #fff; 
        color: rgba(255,255,255,0.7); 
        font-style: normal; 
        font-weight: 700; 
        text-transform: uppercase; 
        font-size: 9px; 
        letter-spacing: 1px; 
        padding-top: 4px; 
        font-family: 'Open Sans', Arial, sans-serif; 
} 

.ch-info4 p a:hover { 
        color: #fff222; 
        color: rgba(255,242,34, 0.8); 
} 

.ch-item4:hover .ch-info-wrap4 { 
        box-shadow: 
                0 0 0 0 rgba(255,255,255,0.8), 
                inset 0 0 3px rgba(115,114, 23, 0.8); 
} 

.ch-item4:hover .ch-info4 { 
        -webkit-transform: rotate3d(0,1,0,-180deg); 
        -moz-transform: rotate3d(0,1,0,-180deg); 
        -o-transform: rotate3d(0,1,0,-180deg); 
        -ms-transform: rotate3d(0,1,0,-180deg); 
        transform: rotate3d(0,1,0,-180deg); 
} 

  /* End Demo 4 */ 

  /* Begin Demo 5 */ 

.ch-item5 { 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        position: relative; 
        box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
        cursor: default; 
} 

.ch-info-wrap5, 
.ch-info5{ 
        position: absolute; 
        width: 180px; 
        height: 180px; 
        border-radius: 50%; 
} 

.ch-info-wrap5 { 
        top: 20px; 
        left: 20px; 
        background: #f9f9f9 url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/bg.jpg); 
        box-shadow: 
                0 0 0 20px rgba(255,255,255,0.2), 
                inset 0 0 3px rgba(115,114, 23, 0.8); 

} 

.ch-info5 > div { 
        display: block; 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        background-position: center center; 
        
        -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/ 
} 

.ch-info5 .ch-info-front5 { 
        -webkit-transition: all 0.6s ease-in-out; 
        -moz-transition: all 0.6s ease-in-out; 
        -o-transition: all 0.6s ease-in-out; 
        -ms-transition: all 0.6s ease-in-out; 
        transition: all 0.6s ease-in-out; 
} 

.ch-info5 .ch-info-back5 { 
        opacity: 0; 

        background: #223e87; 
        pointer-events: none; 
        
        -webkit-transform: scale(1.5); 
        -moz-transform: scale(1.5); 
        -o-transform: scale(1.5); 
        -ms-transform: scale(1.5); 
        transform: scale(1.5); 
        
        -webkit-transition: all 0.4s ease-in-out 0.2s; 
        -moz-transition: all 0.4s ease-in-out 0.2s; 
        -o-transition: all 0.4s ease-in-out 0.2s; 
        -ms-transition: all 0.4s ease-in-out 0.2s; 
        transition: all 0.4s ease-in-out 0.2s; 
} 

.ch-img-13 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/13.jpg); 
} 

.ch-img-14 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/14.jpg); 
} 

.ch-img-15 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/15.jpg); 
} 

.ch-info5 h3 { 
        color: #fff; 
        text-transform: uppercase; 
        letter-spacing: 2px; 
        font-size: 18px; 
        margin: 0 15px; 
        padding: 40px 0 0 0; 
        height: 80px; 
        font-family: 'Open Sans', Arial, sans-serif; 
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3); 
} 

.ch-info5 p { 
        color: #fff; 
        padding: 10px 5px 0; 
        font-style: italic; 
        margin: 0 30px; 
        font-size: 12px; 
        border-top: 1px solid rgba(255,255,255,0.5); 
} 

.ch-info5 p a { 
        display: block; 
        color: #e7615e; 
        font-style: normal; 
        font-weight: 700; 
        text-transform: uppercase; 
        font-size: 9px; 
        letter-spacing: 1px; 
        padding-top: 4px; 
        font-family: 'Open Sans', Arial, sans-serif; 
} 

.ch-info5 p a:hover { 
        color: #fff; 
} 

.ch-item5:hover .ch-info-front5 { 
        -webkit-transform: scale(0); 
        -moz-transform: scale(0); 
        -o-transform: scale(0); 
        -ms-transform: scale(0); 
        transform: scale(0); 
        
        opacity: 0; 
} 

.ch-item5:hover .ch-info-back5 { 
        -webkit-transform: scale(1); 
        -moz-transform: scale(1); 
        -o-transform: scale(1); 
        -ms-transform: scale(1); 
        transform: scale(1); 
        
        opacity: 1; 
        pointer-events: auto; 
} 

  /* End Demo 5 */ 

  /* Begin Demo 6 */ 

.ch-item6 { 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        position: relative; 
        box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
        cursor: default; 
} 

.ch-info-wrap6, 
.ch-info6{ 
        position: absolute; 
        width: 180px; 
        height: 180px; 
        border-radius: 50%; 
        
        -webkit-transition: all 0.4s ease-in-out; 
        -moz-transition: all 0.4s ease-in-out; 
        -o-transition: all 0.4s ease-in-out; 
        -ms-transition: all 0.4s ease-in-out; 
        transition: all 0.4s ease-in-out; 
        
        -webkit-perspective: 800px; 
        -moz-perspective: 800px; 
        -o-perspective: 800px; 
        -ms-perspective: 800px; 
        perspective: 800px; 
} 

.ch-info-wrap6 { 
        top: 20px; 
        left: 20px; 
        background: #f9f9f9 url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/bg.jpg); 
        box-shadow: 
                0 0 0 20px rgba(255,255,255,0.2), 
                inset 0 0 3px rgba(115,114, 23, 0.8); 
        
} 

.ch-info6 { 
        -webkit-transform-style: preserve-3d; 
        -moz-transform-style: preserve-3d; 
        -o-transform-style: preserve-3d; 
        -ms-transform-style: preserve-3d; 
        transform-style: preserve-3d; 
} 

.ch-info6 > div { 
        display: block; 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        background-position: center center; 
        -webkit-transition: all 0.6s ease-in-out; 
        -moz-transition: all 0.6s ease-in-out; 
        -o-transition: all 0.6s ease-in-out; 
        -ms-transition: all 0.6s ease-in-out; 
        transition: all 0.6s ease-in-out; 
} 

.ch-info6 .ch-info-front6 { 
        -webkit-transform-origin: 50% 100%; 
        -moz-transform-origin: 50% 100%; 
        -o-transform-origin: 50% 100%; 
        -ms-transform-origin: 50% 100%; 
        transform-origin: 50% 100%; 
        
        z-index: 100; 
        box-shadow: 
                inset 2px 1px 4px rgba(0,0,0,0.1); 
} 

.ch-info6 .ch-info-back6 { 
        background: rgba(230,132,107,0); 
} 

.ch-img-16 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/16.jpg); 
} 

.ch-img-17 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/17.jpg); 
} 

.ch-img-18 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/18.jpg); 
} 

.ch-info6 h3 { 
        color: #fff; 
        text-transform: uppercase; 
        letter-spacing: 2px; 
        font-size: 14px; 
        margin: 0 25px; 
        padding: 40px 0 0 0; 
        height: 90px; 
        font-family: 'Open Sans', Arial, sans-serif; 
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3); 
} 

.ch-info6 p { 
        color: #fff; 
        padding: 10px 5px; 
        font-style: italic; 
        margin: 0 30px; 
        font-size: 12px; 
        border-top: 1px solid rgba(255,255,255,0.5); 
} 

.ch-info6 p a { 
        display: block; 
        color: #fff; 
        color: rgba(255,255,255,0.7); 
        font-style: normal; 
        font-weight: 700; 
        text-transform: uppercase; 
        font-size: 9px; 
        letter-spacing: 1px; 
        padding-top: 4px; 
        font-family: 'Open Sans', Arial, sans-serif; 
} 

.ch-info6 p a:hover { 
        color: #fff222; 
        color: rgba(255,242,34, 0.8); 
} 


.ch-item6:hover .ch-info-front6 { 
        -webkit-transform: rotate3d(1,0,0,-180deg); 
        -moz-transform: rotate3d(1,0,0,-180deg); 
        -o-transform: rotate3d(1,0,0,-180deg); 
        -ms-transform: rotate3d(1,0,0,-180deg); 
        transform: rotate3d(1,0,0,-180deg); 
        
        box-shadow: 
                inset 0 0 5px rgba(255,255,255,0.2), 
                inset 0 0 3px rgba(0,0,0,0.3); 
} 

.ch-item6:hover .ch-info-back6 { 
        background: rgba(230,132,107,0.6); 
} 

  /* End Demo 6 */ 

  /* Begin Demo 7 */ 

.ch-item7 { 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        position: relative; 
        cursor: default; 
        -webkit-perspective: 900px; 
        -moz-perspective: 900px; 
        -o-perspective: 900px; 
        -ms-perspective: 900px; 
        perspective: 900px; 
} 
.ch-info7{ 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        -webkit-transform-style: preserve-3d; 
        -moz-transform-style: preserve-3d; 
        -o-transform-style: preserve-3d; 
        -ms-transform-style: preserve-3d; 
        transform-style: preserve-3d; 
} 
.ch-info7 > div { 
        display: block; 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        border-radius: 50%; 
        background-position: center center; 
        -webkit-transition: all 0.4s linear; 
        -moz-transition: all 0.4s linear; 
        -o-transition: all 0.4s linear; 
        -ms-transition: all 0.4s linear; 
        transition: all 0.4s linear; 
        -webkit-transform-origin: 50% 0%; 
        -moz-transform-origin: 50% 0%; 
        -o-transform-origin: 50% 0%; 
        -ms-transform-origin: 50% 0%; 
        transform-origin: 50% 0%; 
} 

.ch-info7 .ch-info-front7 { 
        box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3); 
} 

.ch-info7 .ch-info-back7 { 
        -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); 
        -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); 
        -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); 
        -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); 
        transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); 
        background: #000; 
        opacity: 0; 
} 

.ch-img-19 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/19.jpg); 
} 

.ch-img-20 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/20.jpg); 
} 

.ch-img-21 { 
        background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/21.jpg); 
} 

.ch-info7 h3 { 
        color: #fff; 
        text-transform: uppercase; 
        letter-spacing: 2px; 
        font-size: 24px; 
        margin: 0 15px; 
        padding: 60px 0 0 0; 
        height: 110px; 
        font-family: 'Open Sans', Arial, sans-serif; 
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3); 
} 

.ch-info7 p { 
        color: #fff; 
        padding: 10px 5px; 
        font-style: italic; 
        margin: 0 30px; 
        font-size: 12px; 
        border-top: 1px solid rgba(255,255,255,0.5); 
} 

.ch-info7 p a { 
        display: block; 
        color: #fff; 
        color: rgba(255,255,255,0.7); 
        font-style: normal; 
        font-weight: 700; 
        text-transform: uppercase; 
        font-size: 9px; 
        letter-spacing: 1px; 
        padding-top: 4px; 
        font-family: 'Open Sans', Arial, sans-serif; 
} 

.ch-info7 p a:hover { 
        color: #fff222; 
        color: rgba(255,242,34, 0.8); 
} 

.ch-item7:hover .ch-info-front7 { 
        -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); 
        -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); 
        -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); 
        -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); 
        transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); 
        opacity: 0; 
} 

.ch-item7:hover .ch-info-back7 { 
        -webkit-transform: rotate3d(1,0,0,0deg); 
        -moz-transform: rotate3d(1,0,0,0deg); 
        -o-transform: rotate3d(1,0,0,0deg); 
        -ms-transform: rotate3d(1,0,0,0deg); 
        transform: rotate3d(1,0,0,0deg); 
        opacity: 1; 
} 

/* End Demo 7 */ 

/* End Codrops rounded hover */

STEP 5

We’re just about done!!! In Step 4, you were to open a new blank text document and paste the code you copied from the last step. Now we want to change the default URL paths in the CSS to our images. What you are looking for in each of the sections is the background-image portion. Below is an example and is from the first hover example:

.ch-img-1 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/1.jpg);
}

.ch-img-2 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/2-1.jpg);
}

.ch-img-3 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/3-1.jpg);
}

You want to change each of the image links between the ( ). The first line, we want to change:

http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/1.jpg to:

http://yourdomainname.com/wp-content/uploads/2017/05/your_image_name_here.jpg

Note: Be sure to replace yourdomainname.com with the correct domain name and the same for your images

Once you have your path names changed in the CSS, it’s time to add it to either the custom CSS box or your style sheet, depending on which path you chose earlier. Once your CSS is added, it’s time for the moment of truth. Save your page and preview it, hopefully you have something similar to the example(s) above. If so, congratulations!!

If not, don’t be discouraged, as a lot is going on here in these few short steps. Go back through the tutorial again and check your work. If you are still having problems, please submit a comment and we will look into it as time permits.

7 Comments

  1. Joe

    Hey, I love these and I think I’m going to use #7 on a site I’m working on now. How would these work on phones? The link doesn’t show until the effect is triggered and I assume it can’t be triggered on mobile. Would I need to make the whole image a link?

    Reply
    • Shawn Campbell

      Joe;

      My apologies for not getting back to you sooner. I have been on hiatus as well as covered up under some other projects. Me personally, I would not use them for mobile as I am a believer that mobile and desktop should not be the same on each device, but personal preference I guess. They do work on mobile (if memory serves) if you long press the icons, but most users probably do not know or do that. My goal with these tutorials is to give other users a foundation to think outside the box, the idea to work with, and take it from there. My plans were never to fully develop the idea as it takes away from the learning experience and there are plenty of others out there offering good freebies as well. I hope this helps answer your question.

      All the best…

      Shawn a.k.a Batman

      Reply
    • Shawn Campbell

      Marleen;

      My apologies for getting back to you so late. I have been on hiatus as well as covered up with some projects. Thank you for catching that in the demo and has since been fixed. Checked out the site you used the effect on. GREAT job!!! Keep up the great work!! :o)

      All the best…

      Shawn a.k.a Batman

      Reply
  2. Shaun

    is it possible to take this and make a divi library module for just one item. that way could have a 4 column five column. just have the ability to set columns in the row layout and then insert this as a module with only one element

    Reply
    • Shawn Campbell

      Shaun;

      My apologies on getting back to you late. For some reason the email sent to me got lost in translation. Anything should be possible with this and you would have to adjust the css accordingly for what you are wanting to do. I apologize I am a little covered up with some projects at the moment, but give it a go and reach out again if you have problems. You should only have to take out the html and css for the images other two columns in the code and make it for one as you are want to.

      Sincerely,

      Shawn a.k.a Batman

      Reply
  3. Makarand

    Awesome, I love CoDrops and now you brought their brilliance into Divi. I would love to see more of CoDrop codes in Divi. Keep Going.

    Thanks,
    Makarand

    Reply

Submit a Comment

Your email address will not be published.