See live demo here:
Hover effects create variation on what is so called common look. We simply like new things. We love to deal with it.Today, I am going to share with you another trick in blogging through a rotating hover image holder for a specific image on your blog.This blog was made possible right after I visited the blog of Md. Atiqur Rahman (Atik) .This tutorial is divided into to parts. Putting HTML in your blogger post editor's page and adding CSS in your blogger template source code.
Add Rotating Image Holder for Blogger Images
Part A. Adding HTML CODE to Blogger Editor's Page
2. Switch it to HTML Code and Paste the code below
<div align="center">
<div class="imgholder">
<div class="outer1 circle">
</div>
<div class="outer2 circle">
</div>
<br />
<br />
<br />
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2rSYrGngVenAbSWGCOu7z3MM39_OU9fC17vF8cF5Nc0kxC5WkOc5f4MU21QWXKg6doC8q8QHYKl2FBV8xb8SQ23lA5V1tcQVHTFDaUdEOWU21qsKIrIbk_ZJ0aw1q95_ty3xYtcRdVjq/s250/pizap.com13945459190261.jpg" />
<figcaption class="caption">God's Wonder</figcaption>
</figure>
</div>
</div>
Step 3. Replace the orange bold text with your image url and the red bold text with your image capation
Recommended: How to upload images to blogger and get the image link
Step 4. Save your work and you are halfway done.
Part B: Adding CSC to Blogger Template Source Code
1. Go to Blogger Dashboard >> Template>> Edit HTML
2. Look at the CODE below
]]></b:skin>
Step 3. Copy the CODE below and paste it above this code ]]></b:skin>
.imgholder:hover img {opacity: 1;filter: alpha(opacity = 100);transform: scale(1,1);-ms-transform: scale(1,1);-moz-transform: scale(1,1);-webkit-transform: scale(1,1);}.imgholder img {position: absolute;left: 0;top: 0;width: 120px;height: 120px;z-index: 2;/* border-radius: 100px; */-moz-border-radius: 100px;-webkit-border-radius: 100px;opacity: 0.3;filter: alpha(opacity = 30);box-shadow: 0 0 5px #000;-moz-box-shadow: 0 0 5px #000;/* -webkit-box-shadow: 0 0 5px #000; */transform: scale(0.5,0.5);-ms-transform: scale(0.5,0.5);-moz-transform: scale(0.5,0.5);-webkit-transform: scale(0.5,0.5);transition: opacity 1s, transform 1s ease-in-out 0.3s;-moz-transition: opacity 1s, -moz-transform 1s ease-in-out 0.3s;-webkit-transition: opacity 1s, -webkit-transform 1s ease-in-out 0.3s;}.imgholder:hover .outer1 {border-color: #0088EA #7FC9FF #0088EA #7FC9FF;box-shadow: 0 0 10px #0285E2;-moz-box-shadow: 0 0 10px #0285E2;-webkit-box-shadow: 0 0 10px #0285E2;transform: rotate(-10deg);-ms-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-webkit-transform: rotate(-10deg);}.imgholder:hover .outer2{ opacity:0.9; filter: alpha(opacity = 90); transform: scale(1,1) rotate(-10deg); -ms-transform: scale(1,1) rotate(-10deg); -moz-transform: scale(1,1) rotate(-10deg); -webkit-transform: scale(1,1)rotate(-10deg);}.imgholder .outer1 {top: -8px;left: -8px;width: 120px;height: 120px;z-index: 2;border: 8px solid;border-color: #DEEBFC;box-shadow: 0 0 3px #AFD3FF;-moz-ox-shadow: 0 0 3px #AFD3FF;-webkit-box-shadow: 0 0 3px #AFD3FF;background: #ffffff;background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));/* background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); */background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );transform: rotate(90deg);-ms-transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);transition: transform 1.8s ease-in-out, box-shadow 1s ease-out, border-color 1.5s;-moz-transition: -moz-transform 1.8s ease-in-out, -moz-box-shadow 1s ease-out, border-color 1.5s;-webkit-transition: -webkit-transform 1.8s ease-in-out, -webkit-box-shadow 1s ease-out, border-color 1.5s;}.imgholder .circle {position: absolute;border-radius: 100px;-moz-border-radius: 100px;-webkit-border-radius: 100px;}.imgholder .outer2 {top: -18px;left: -18px;width: 136px;height: 136px;z-index: 1;border: 10px solid;border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;box-shadow: 0 0 20px #8EB9FF;-moz-box-shadow: 0 0 20px #8EB9FF;-webkit-box-shadow: 0 0 20px #8EB9FF;opacity: 0;filter: alpha(opacity = 0);transform: scale(1.3,1.3) rotate(180deg);-ms-transform: scale(1.3,1.3) rotate(180deg);-moz-transform: scale(1.3,1.3) rotate(180deg);-webkit-transform: scale(1.3,1.3) rotate(180deg);transition: opacity 0.5s, transform 0.7s ease-out;-moz-transition: opacity 0.5s, -moz-transform 0.7s ease-out;-webkit-transition: opacity 0.5s, -webkit-transform 0.7s ease-out;}.imgholder .circle {position: absolute;border-radius: 100px;-moz-border-radius: 100px;-webkit-border-radius: 100px;}.imgholder:hover figcaption {top: 85%;}.imgholder figcaption {position: absolute;left: -5px;top: 31%;width: 130px;color: #004E87;font-weight: bold;text-shadow: -1px -1px 0 #fff;z-index: 4;transition: top 0.5s ease-out;-moz-transition: top 0.5s ease-out;-webkit-transition: top 0.5s ease-out;
}
Step 4. Save your work and you are done with this tutorial.
Customization:
Focus first on the image holder on its default and with a mouse hover effects on it.
on default for image outer 1: Change the hexadecimal color #DEEBFC with another one. Please try our hexadecimal colors here.
With mouse hover for image holder outer 1. Replace the hexadecimal colors #0088EA #7FC9FF #0088EA #7FC9FF; with another set of colors. The arrangement is from top (#0088EA ), right (#7FC9FF), bottom (#0088EA) and left (#7FC9FF) respectively.
With mouse hover for image holder outer 2. Just change the hexadecimal colors #D6E5FC #9BC8FF #D6E5FC #9BC8FF with another sets. The arrangement is from top ( #D6E5FC ), right (#9BC8FF ), bottom (#D6E5FC) and left (#9BC8FF) respectively.
For the image holder caption on its default setting, change #004E87 to the color of the image caption. You can also change the margin by costumizing the top and left attributes of the CSS under .imgholder figcaption
Lastly, for the hover effect of the image caption, replace the margin attribute which is 85% for the top margin depending on the position of your caption on the image on your post.
Take care friends!
