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

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.

<style type="text/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: 320px; height: 320px; display: inline-block; margin: 20px; } .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{ background-image: url(http://25.media.tumblr.com/tumblr_m7qa9yxlUR1r5ei3ho1_500.jpg); background-position:50% 50%; background-size:500px; } .ch-info { position: absolute; background: url(http://25.media.tumblr.com/tumblr_lyjn8soO2W1ro1s33o1_500.jpg) D9E8FC;background-position:50% 50%; 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-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; } </style> <ul class="ch-grid"> <li><div class="ch-item ch-img"> <div class="ch-info"> <center> <div style="margin-top:80px; width:270px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBnTl-3vzPqWE_R_OxB2686MRB74ALO2Yc4jBZYiKvcStSX9wUgnTxPBw_DvMr2SIIwGX4VskSCS_8G2Cy8eoArVaFqgy4oGQGBcMCvkF3-XSjKf8bmHKXYSxDDJeHqRNpuJXdCJoAvE_/s1600/bodybg.gif); border-radius:10px;text-align:left;padding:5px;"> anything here <br/></div> </center> </div> </div> </li> </ul>

Thank you for using.