Welcome to ThemesGadget. I’m back with part 3 of making an image hover style in Blogger with an Image caption and icon on hover also show an icon on image hover. In this tutorial, you will learn to create a simple hover style for images and Text elements in blog posts.
You can use this hover style for individual text or the whole post. Let’s get started with creating Image Hover Style #3 in Blogger.
Image Hover Style In Blogger
Before I start with this tutorial, please read my previous tutorials. In the first tutorial, I have explained how to create an image hover effect with titles and icons in Blogger.
Remember that image hover style is beneficial for bloggers and website owners who need to generate visitors and make their website look attractive.
In today’s tutorial, we will discuss image hover style in Blogger. It means you can create a similar type of image hover effect in Blogger by following our tutorials.
Using Images In Blogger
With the advent of responsive design, an image is no longer a static piece of content. It can be a transitional element, enhanced by HTML and CSS for maximum effect.
Using images in blog posts has become common, so let’s take it further and upload our pictures in Blogger.
Some users have problems inserting the image because Blogger uses CDN for photos. Because of this, the name of the image is not there in the URL.
In this case, we do not have to upload the image by going to the insert image but upload the image by dragging and drop in the compose view.
How To Make An Image Hover Style #3 In Blogger
To make an image hover style with an Image caption and icon on hover for your blogger site, you need to add HTML, CSS, and JavaScript codes for it. And these codes have to be added in 3 steps. We will add HTML code in the 1st step, CSS in 2nd, and JavaScript in the last step.
Step 1 – Adding HTML (Image Caption Hover)
Change The highlighted HTML according to your requirement, For Example:- Image URL, Heading, Paragraph, And targeted URL.
<div class="Main-IH3">
<figure class="snip1428">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOmB-DePH5PsCTFXPh-IgIWzahtJIzXeOYvn31PWOS1NEqqnKKmZ5LDOAL3RKYvQTA6niJPE3nxrkbKPbvM8W7O7SDwgtOpVse8D2JGdxNEux2vho-AP6NvDJgy41Re5XX6xEP0B83L78/s0/unplug-themesgadget-demo-style-5-1.webp" alt="sample69" />
<figcaption>
<h3>Themes Gadget</h3>
<p>Which is worse, that everyone has his price, or that the price is always so low.</p>
</figcaption>
<i class="ion-ios-home-outline"></i>
<a href="#####"></a>
</figure>
<figure class="snip1428 hover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI3zb_YxIlcI1GKdBVrC7ByPPKMrIN-DLvepzthZIXpdmmsSyDLI2HenzO4FeAudL0HE97t1upDqC3nTJOyL0NTOMSwDnVICeT0JoZ-Q8asnZwXmADdsoQl_HY0zGMxO_ZWhP183jZzJQ/s0/unplug-themesgadget-demo-style-5-2.webp" alt="sample70" />
<figcaption>
<h3>Themes Gadget</h3>
<p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
</figcaption>
<i class="ion-ios-personadd-outline"></i>
<a href="#####"></a>
</figure>
<figure class="snip1428">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywMe3LacqRVwmlSQ4KwSjkpX407rn8CHGsYbNZadTzBqDmn8CnhgePnzqzfllxkcyJY6OdAIQdIkCY_xY1Tf8RQlFaZZ2EVcUGAHs8ISw3SeHD2i7Ew8w8RnE1E0AVfM3f8yioxHKH7s/s0/unplug-themesgadget-demo-style-5-3.webp" alt="sample77" />
<figcaption>
<h3>Themes Gadget</h3>
<p>The only skills I have the patience to learn are those that have no real application in life.</p>
</figcaption>
<i class="ion-ios-location-outline"></i>
<a href="#####"></a>
</figure>
</div>
Step 2 - Adding CSS Image Hover Effects
These CSS Codes are in a Compressed format. If you want to beautify, you can use our tool by Following this Link – CSS Beautifier Tool.
If you use the Imagz + Landing Page blogger template, add this highlighted CSS; Otherwise, leave it.
<style type="text/css">
.onPst .blogPts{max-width:1040px;}
.pBd img {border-radius: 0;}
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);.Main-IH3{display:flex;justify-content:center;align-items:center;flex-flow:wrap;margin:0;height:100%;}figure.snip1428{font-family:'Noto Sans',sans-serif;position:relative;overflow:hidden;margin:10px;min-width:230px;max-width:315px;max-height:220px;width:100%;color:#000000;text-align:left;font-size:16px;background-color:#000000;}figure.snip1428 *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.35s ease;transition:all 0.35s ease;}figure.snip1428 img{max-width:100%;backface-visibility:hidden;}figure.snip1428 figcaption{position:absolute;top:0;bottom:0;left:0;z-index:1;opacity:1;padding:30px 10px 30px 0;background-color:#ffffff;width:40%;-webkit-transform:translateX(-150%);transform:translateX(-150%);}figure.snip1428 figcaption:before{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:100%;content:'';width:0;height:0;border-style:solid;border-width:120px 0 120px 120px;border-color:transparent transparent transparent #ffffff;}figure.snip1428:after{position:absolute;top:50%;left:40%;content:'';width:0;height:0;border-style:solid;border-width:0 120px 120px 120px;border-color:transparent transparent rgba(255,255,255,0.5) transparent;-webkit-transform:translateY(50%);transform:translateY(50%);-webkit-transition:all 0.35s ease;transition:all 0.35s ease;}figure.snip1428 h3,figure.snip1428 p{line-height:1.5em;-webkit-transform:translateX(30px);transform:translateX(30px);margin:0;}figure.snip1428 h3{margin:0 0 5px;line-height:1.1em;font-weight:900;font-size:1.4em;opacity:0.75;}figure.snip1428 p{font-size:0.8em;}figure.snip1428 i{position:absolute;top:0;right:0;padding:25px 35px;font-size:44px;color:#ffffff;opacity:0;}figure.snip1428 a{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;}figure.snip1428:hover img,figure.snip1428.hover img{zoom:1;filter:alpha(opacity=50);-webkit-opacity:0.5;opacity:0.5;}figure.snip1428:hover:after,figure.snip1428.hover:after,figure.snip1428:hover figcaption,figure.snip1428.hover figcaption,figure.snip1428:hover i,figure.snip1428.hover i{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
</style>
Step 3 - Adding JavaScript (Jquery Image Hover Effect)
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
/* Demo purposes only */
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
</script>
Conclusion
I have discussed making an image hover style in Blogger with an Image caption and icon on hover. It is easy to create an image hover effect. Earlier I have created two tutorials related to image hover style. If you do not yet bookmark my blog, then bookmark my blog and follow.
Using image hover style in Blogger, you can automatically render your images as a beautiful hover effect and make them look like an actual website.
I hope this tutorial will help you learn how easy it is for beginners like myself to create Image Hover Style in a blogger. If you want more tutorials about this topic, If you have any problems with the tutorial, please comment below so that I can help you out!
