How to Add Circle Box with Hover Effect to your blog - Style 4

Assalamualaikum, this tutorial is requested. At first, I was hesitated to post this tutorial as the codes are not mine. But I understand that many of you guys don't really understand on how to use the codes by that website. Don't worry it was hard for me too. This tutorial are belongs to: Owner

Click here too see Live Preview

I have provided the codes below. Edit the codes in http://htmledit.squarefree.com/ and then paste them in where ever you wanted them to be. Both classic template and Blogger new template designer can use this box. 

<center><style type="text/css">.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } .ch-info-wrap, .ch-info{ position: absolute; width: 280px; height: 280px; 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-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/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-info { -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-info > 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-info .ch-info-front { -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-info .ch-info-back { background: rgba(230,132,107,0); } .ch-img-1 { background-image: url(http://24.media.tumblr.com/tumblr_mb4006VUGv1rbavh7o1_500.png); } .ch-item:hover .ch-info-front { -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-item:hover .ch-info-back { background:#F0ECE6; } .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: 320px; height: 320px; display: inline-block; margin: 20px; } </style> <ul class="ch-grid"> <li><div class="ch-item ch-img-1"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-1"> </div> <div class="ch-info-back"> content here </div> </div> </div> </div> </li> </ul> </center>