Welcome to ThemesGadget. We already discussed how to make an image hover style #1 in blogger. Now, let’s discuss how to make an image hover style #2 with Image and title with animated lines on hover. Some steps need to be considered by you.
These steps are mentioned below-
When you create an image hover style, you must find out which color best suits your website for this purpose. Nowadays, many websites use light colors for their backgrounds because dark colors can obscure text and images.
Secondly, you need to select a font that will complement the colors of your background and your logo. You also have to decide whether or not to use a font with a shadow effect or not – this will depend on what kind of look you’re going for.
Finally, you need to choose which type of animation best suits your website and its audience. In most cases, a simple fade-in or fade-out effect is enough – something too flashy could distract users.
Different Types of Image Hover Styles
There are a few different types of image hover styles that you can choose from. One type is a simple fade-in effect, where the image gradually becomes visible as the user hovers over it.
You can also opt for a more subtle flip-in effect – this will make the image appear on the side opposite the cursor.
For Example
If you’re browsing in portrait mode, then when you scroll downwards and hover over an image, it will flip in from the right edge of your screen (from left to right).
The third type of hover style is called “smooth-in” or “smooth-over.” This one starts with no animation – once you mouse over it, it enters with a smooth transition.
A fourth option is to make your images come in with a bouncy effect – this one’s kind of like flipping but has more energy.
The last option is to make an animated GIF (graphics interchange format) for your website – this would allow for full animation during the hover process.
Advantages Of Using Image Hover style
Image hover is an important design element that can be used for website design. Image hover adds dimension to the webpage and makes the webpage look more attractive.
Below are some of the advantages of using image hover styles-
Image hover adds style to your website design. It makes the page more appealing for visitors and customers. The hover effect also generates interest in the page by making it seem like there is something “hidden”.
Image hover is a great way to advertise other products on your website or blog without having to use distracting pop-ups or banners. The pop-up, advertising product will appear when the cursor hovers over the image – this will not disturb other content on your site.
Using image hover can help you rank better in Search Engine Results Pages (SERPs). Search engines love sites with images because they offer more information than text-based sites do.
Visitors who are looking for something specific may be more likely to click on your site if it has a high number of quality images that relate to their search query.
Select The Right Color
Choosing the right color for your website’s image hover style is crucial because it can make or break the design. A light background with a dark color will make it difficult to read a text and click on buttons, but a dark background with a light color will make it hard to see the content.
In most cases, it’s best to choose a lighter shade of gray or another neutral color, like blue.
Select The Right Font
Selecting the right font is of utmost importance for your logo because it will define the tone of your company and the voice you want to convey. The average person can distinguish between fonts such as Arial, Times New Roman, and Comic Sans with ease.
Select a font that will balance well with the background of your website and doesn’t obscure text or images.
For Example - Image Hover Style
If you’re using a light color for your website’s background, avoid fonts with dark shadows because they can make it difficult to read a text and see images. Use a font color that complements the background.
It’s also important to select a font that reflects what your company stands for because it sets the tone of your business in seconds.
Select The Right Animation
If you want a simple, subtle effect, then a fade-in or fade-out is perfect. On the other hand, if you want something that will grab your audience’s attention, then consider choosing one of the more flashy options.
In most cases, simple subtle animation is enough – something too flashy could distract from the message you’re trying to convey.
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.
Step 1 – Adding HTML (Image Caption Hover)
Change The highlighted HTML according to your requirement, For Example:- Image URL, Text, and Target URL.
<div class="Main-IH2">
<figure class="snip1406">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEpa9c0ld4xTBGMhg8QeLORmjOkyhHfrxStQ8tFK_5c_kevDqDoMSIjz_b0vFurbQVwJW7QHLzPko8r7M5C17_iXdOa9Fz7Zxaio9nwxeHAAIUZytwyeG49E6u9ZYG7CzXjc2OJRqZ0Qc/s0/unPlug-Demo-Style-3-1.webp" alt="sample69" />
<figcaption>
<div>
<h2>Themes</h2>
<h4>Gadget</h4>
</div>
</figcaption>
<a href="#####"></a>
</figure>
<figure class="snip1406 hover"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAb5PpIGKRYXzVy2DfYOqQVwwFL9O5HFfTFqGkU6qB5-1GBgyudCOC3iFRdiGPKMRVN64NfkwRG-tfFBulNFr7UAddLTcoV5juu3HvqkzIV0eV26fKMbnqnO2Mnq8zncvHV1vLlltxZQ/s0/unPlug-Demo-Style-3-2.webp" alt="sample85" />
<figcaption>
<div>
<h2>Themes</h2>
<h4>Gadget</h4>
</div>
</figcaption>
<a href="#####"></a>
</figure>
<figure class="snip1406"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDEi0PUa1omdxpUG9YVvxu3h9PGB5E5qmvcWopNh9Npn5VpAUC9rM2kX7uUnfGoPAPfQK8XaQOix9hBmZhyphenhyphenixWFrmPax3CWDsyCKDf5ksrmnY6dojokkWw2s8ISC_AhUj7MVRITUGNZU/s0/unPlug-Demo-Style-3-3.webp" alt="sample55" />
<figcaption>
<div>
<h2>Themes</h2>
<h4>Gadget</h4>
</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>
.onPst .blogPts{max-width:1040px;}
.pBd img {border-radius: 0;}
.Main-IH2{display:flex;justify-content:center;align-items:center;flex-flow:wrap;margin:0;height:100%;font-family:'noto sans',sans-serif}figure.snip1406{position:relative;overflow:hidden;margin:10px;min-width:230px;max-width:315px;width:100%;color:#fff;text-align:center;font-size:16px;background-color:#000}figure.snip1406 *,figure.snip1406 :after,figure.snip1406 :before{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .55s ease;transition:all .55s ease}figure.snip1406 img{max-width:100%;backface-visibility:hidden;vertical-align:top}figure.snip1406 figcaption{position:absolute;top:25px;left:25px;padding:5px 10px 10px}figure.snip1406 figcaption:after,figure.snip1406 figcaption:before{height:2px;width:400px;position:absolute;content:'';background-color:#fff}figure.snip1406 figcaption:before{top:0;left:10px;-webkit-transform:translateX(100%);transform:translateX(100%)}figure.snip1406 figcaption:after{bottom:0;right:10px;-webkit-transform:translateX(-100%);transform:translateX(-100%)}figure.snip1406 figcaption div:after,figure.snip1406 figcaption div:before{width:2px;height:300px;position:absolute;content:'';background-color:#fff}figure.snip1406 figcaption div:before{top:10px;right:0;-webkit-transform:translateY(100%);transform:translateY(100%)}figure.snip1406 figcaption div:after{bottom:10px;left:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}figure.snip1406 h2,figure.snip1406 h4{margin:0;text-transform:uppercase}figure.snip1406 h2{font-weight:400;color:#fff}figure.snip1406 h4{display:block;font-weight:700;background-color:#fff;padding:5px 10px;color:#818181;line-height:1}figure.snip1406 a{position:absolute;top:0;bottom:0;left:0;right:0}figure.snip1406.hover img,figure.snip1406:hover img{zoom:1;-webkit-opacity:.5;opacity:.5}figure.snip1406.hover figcaption div:after,figure.snip1406.hover figcaption div:before,figure.snip1406.hover figcaption:after,figure.snip1406.hover figcaption:before,figure.snip1406:hover figcaption div:after,figure.snip1406:hover figcaption div:before,figure.snip1406:hover figcaption:after,figure.snip1406:hover figcaption:before{-webkit-transform:translate(0,0);transform:translate(0,0)}figure.snip1406.hover figcaption:after,figure.snip1406.hover figcaption:before,figure.snip1406:hover figcaption:after,figure.snip1406:hover figcaption:before{-webkit-transition-delay:.15s;transition-delay:.15s}
</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
In this tutorial, we covered image hover style #2 in this post, but in a few days, more articles will come on hover styles that will be more exciting and unique with different styles.
I hope you enjoyed reading this article on how to make responsive image hover styles #2 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 post.