Welcome to ThemesGadget. In this post, we will learn how to make responsive image hover style #1 in blogger, how to add hover text on image in HTML, how to add hover text to an image.
Images can make a website stand out and create a cohesive design feel for the site. However, there are many different ways to display images on a web page. One way is with hover styles.
The most popular hover style is that the image becomes larger, but many other effects can be added to create variety and interest for your site visitors. Check out this article to learn how to add image hover styles to your blogger site and explore all the possibilities of using them.
What Are Image Hover Styles?
Images are an essential part of web design. Images can set the tone for a website, create a cohesive design feel, and help maintain reader interest. One way to use images is with hover styles.
Hover styles are when you hover on an image, and it will change its appearance. You can use image hover styles to make your pictures more interesting or unexpected. There are many different effects that can be added to create variety and interest for your site visitors.
In this post, we'll explore how to use hover styles in blogger as well as all the possibilities of using them!
The Benefits of Image Hover Styles
You can use image hover styles to change the appearance of an image when someone hovers on it. This is different from the image's default behavior to fill more of the screen. Hover styles are trendy, and they help create a more dynamic feel for your site.
Hover styles are typically used for images that are already large so that you can showcase them even more by adding different effects like scaling up or down. Typically, this happens on larger screens like desktops, laptops, and tablets. Image hover styles also offer visual variety for site visitors because they can be customized with different effects.
You can design your image hover style using CSS (Cascading Style Sheets). It's important to note that not all browsers support CSS hover features very well. If you want to ensure everyone will see the same hover style effect, you should use JavaScript instead.
JavaScript-based hover styles are versatile; they can do everything CSS-based hover styles can do, but there are even more options.
For Example – Image Hover Styles
These images have a sliding feature to move from one image to another when hovering over it. There are many ways to use JavaScript-based photos in a website design and explore them.
Common Types Of Image Hover Styles
One of the most straightforward hover styles is to make an image larger when a visitor moves their mouse over it (CSS hover image zoom effects). This is a common way of using a hover effect because it's easy and doesn't take too much space on your website.
Another type of image hover style is to add a caption below the image that will show up on hover. This is perfect for adding more information about an image without adding text within the image itself.
One of the most popular types of hover effects is to have a color overlay appear on hover (image hover text overlay). This creates a unique effect for your images and can help generate interest in your site visitors, especially if you have a lot of different images with different colors.
A different type of effect is to change an image into a 3D object or animated character when visitors hover over it. This may be better for younger audiences who are willing to explore new effects that aren't found in many other places (change image on hover CSS).
How To Make A Image Hover Style?
To make an Image Hover Style for your blogger site, you need to add HTML, CSS, and JavaScript (JQuery) codes for it. 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:- images and social media links!
<div class="Main-IH1">
<figure class="snip1267"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5gLNYfs4boPH-FaBIss458xmsLuJWAnCvtFpWvcImHDrP4jARGIdUSTGvOvzrPAfWOJlbPaYcDA8GkGcjvzGF_svJ5CXPCOS7Nzoiiug3YGV6F4IySgqSIXzKxWuVLcJEZJxDomCcBM/s0/unPlug-Demo-Style-2-1.webp" alt="sample31" />
<figcaption>
<h2>Themes Gadget</h2>
<div class="icons"> <a href="#"><i class="ion-social-linkedin-outline"></i></a>
<a href="#"> <i class="ion-social-twitter-outline"></i></a>
<a href="#"> <i class="ion-social-instagram-outline"></i></a>
</div>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1267 hover"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Q1VkgRbSGOXMXsP1oSqNWTDbJ3Z8c6c71dx_unyhkGux7zTtvI1I2HWI6V_Mqf_82W5OQX7eURoq4iD5ChPblbf5jeXgq4-SnCz827Y-GPXemb-rd5R3DSJHhHmmz__bM9SkJM35YQg/s0/unPlug-Demo-Style-2-2.webp" alt="sample2" />
<figcaption>
<h2>Themes Gadget</h2>
<div class="icons"> <a href="#"><i class="ion-social-linkedin-outline"></i></a>
<a href="#"> <i class="ion-social-twitter-outline"></i></a>
<a href="#"> <i class="ion-social-instagram-outline"></i></a>
</div>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1267"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8q3sxpB_tI-hTiqG8KnL94oTCs6lHcAGxJ-MFOX6np-qLmsLsicn9fvZsD7SOSQbllv8os-bIqz0Pe8BLpF7nhX76P01cz5-T3ifJPilxi6rKrdp3Mrjo30yEcXpkTIkf2ICMi9fuitA/s0/unPlug-Demo-Style-2-3.webp" alt="sample22" />
<figcaption>
<h2>Themes Gadget</h2>
<div class="icons"> <a href="#"><i class="ion-social-linkedin-outline"></i></a>
<a href="#"> <i class="ion-social-twitter-outline"></i></a>
<a href="#"> <i class="ion-social-instagram-outline"></i></a>
</div>
</figcaption>
<a href="#"></a>
</figure>
</div>
Step 2 - Adding CSS (Image Hover Effects)
These CSS Codes are in Compressed format if you want to beautify you can use our CSS Beautifier Tool
If you use the Imagz + Landing Page blogger template, add this highlighted CSS; Otherwise, leave it.
<style type="text/css">
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);.onPst .blogPts{max-width:1040px;}.Main-IH1{display:flex;justify-content:center;align-items:center;flex-flow:wrap;margin:0;height:100%;font-family:'Noto Sans',sans-serif;}.snip1267{position:relative;overflow:hidden;margin:10px;min-width:220px;max-width:310px;width:100%;color:#ffffff;text-align:center;}.snip1267 *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.35s 0.5s ease;transition:all 0.35s 0.5s ease;}.snip1267 img{max-width:100%;vertical-align:top;}.snip1267 figcaption{position:absolute;height:100%;width:100%;top:0;left:0;z-index:1;}.snip1267 h2{position:absolute;margin:0;width:100%;left:0;top:50%;opacity:0;padding:0 30px;display:inline-block;font-weight:300;text-transform:uppercase;-webkit-transform:translate(0,-100%);transform:translate(0,-100%);color:#fff;}.snip1267 .icons{position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0;}.snip1267 i{padding:10px 5px;display:inline-block;font-size:24px;color:#ffffff;text-align:center;opacity:0.7;}.snip1267 i:hover{opacity:1;-webkit-transition:all 0.35s ease;transition:all 0.35s ease;}.snip1267:before{position:absolute;top:0;bottom:100%;right:0;left:0;content:'';background-color:#34495e;z-index:1;opacity:0.5;-webkit-transition:all 0.35s 0.3s ease-in;transition:all 0.35s 0.3s ease-in;}.snip1267:after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-style:solid;border-width:0 200px 200px 200px;border-color:transparent transparent #34495e transparent;opacity:0.8;-webkit-transition:all 0.35s 0s ease-out;transition:all 0.35s 0s ease-out;}.snip1267:hover h2,.snip1267.hover h2,.snip1267:hover .icons,.snip1267.hover .icons{opacity:1;}.snip1267:hover h2,.snip1267.hover h2{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);}.snip1267:hover:before,.snip1267.hover:before{bottom:0;-webkit-transition:all 0.35s 0s ease-out;transition:all 0.35s 0s ease-out;}.snip1267:hover:after,.snip1267.hover:after{top:25%;-webkit-transition:all 0.35s 0.2s ease-in;transition:all 0.35s 0.2s ease-in;}
</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
To create an Image hover style, you need to think about what you want to happen when any user hovers their mouse over a specific image. This is when you want the user to get more information about the photo or find out more information about the product.
The idea is that the user hovers on the image and for this. You need to make it stand out from the rest of your website.
In this tutorial, we covered only one image hover style in this post, but in a few days, more articles will come on hover styles that will be more exciting and unique.
I hope you really enjoyed reading this article on how to make responsive image hover styles using HTML, CSS, and Javascript on your blogger site! Please comment with any related questions or feedback you might have, and I'll see you in the next article.