Welcome to ThemesGadget. In this post, we will learn how to Create Responsive Image Caption Hover Effects In Blogger and WordPress. Just follow our steps carefully to avoid any errors. But first, Let’s talk about it a little.
Image captions are great for adding descriptions to an image, but web developers often struggle with making them appear in the right spot on their website. There are many ways you can make your image caption hover effects in a website more appealing to your visitors.
Some of these methods include using CSS3, HTML5, and JavaScript. To learn more about how to make your image caption hover effects in blogger work the best for you, read on!
What Are Image Caption Hover Effects?
Image captions are a great way to describe the images on your website to your visitors. Image captions can be used to provide context for what is happening in the picture, or they can be used as a call-to-action for your visitors.
Regardless of how you use them, your image captions must be visible to viewers. When web developers design their websites, image captions are an issue because they are often hidden behind the picture.
There are plenty of ways to make your image caption hover effects in blogger work for you and display more prominently on the screen. We’ll cover one of their methods below!
Why Are Image Captions Useful?
Image captions are a great way to add a description to an image. They’re also an opportunity for web developers to convey more information about an image.
Images can be used in many ways on websites, whether they’re for decoration or for showing off your latest product. Photos must be given appropriate captions so users know what the images are about and what they signify.
If you want your images to look professional on your blog, you must use the image caption hover effects. Websites like Pinterest and LinkedIn often show content without captions, which gives them a less sophisticated appearance than websites with captions.
Additionally, if you’re using images on your website as advertisements of any kind, you will want the text in the caption to match the words of the advertisement copy. This ensures that people understand what you’re trying to sell without having to do more research.
Why Image Caption Hover Effects Matter
Image captions are great for adding a description to an image. They’re typically placed below the image and provide information about what you’re looking at. For example, if you had a photo of your company’s new product on your website, you might include an image caption that reads “Introducing our latest innovation: The XYZ.”
Like most things on a webpage, image captions don’t always show up where we want them. But luckily, there are many ways you can make your image caption hover effects in blogger more appealing to your visitors!
One of the ways is to use CSS3. With CSS3, you can position an element wherever you want on a page or change its size, color, and other properties. So if you wished the caption to show up at the bottom of the page instead of below your image, all you would need to do is add some CSS code like this: “position: absolute; bottom: 0px; left: 0px;” (without quotation marks).
How To Make Image Caption Hover Effects?
To make an image caption hover effect, you need some codes for it. These codes have to be added in three steps. We will add HTML code in the 1st step, CSS in the 2nd step, and javascript (Jquery) in the last step.
Step 1 - Adding HTML
<div class="Main-I3CHE">
<figure class="snip1234">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5gLNYfs4boPH-FaBIss458xmsLuJWAnCvtFpWvcImHDrP4jARGIdUSTGvOvzrPAfWOJlbPaYcDA8GkGcjvzGF_svJ5CXPCOS7Nzoiiug3YGV6F4IySgqSIXzKxWuVLcJEZJxDomCcBM/s0/unPlug-Demo-Style-2-1.webp"/>
<figcaption>
<h3>Themes Gadget</h3>
<p>A website for all blogger templates solutions, blogger widgets, tips & tricks and much more.</p>
<a href="#" class="read-more">Read More</a>
</figcaption>
</figure>
<figure class="snip1234 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="sample3"/>
<figcaption>
<h3>Themes Gadget</h3>
<p>A website for all blogger templates solutions, blogger widgets, tips & tricks and much more.</p>
<a href="#" class="read-more">Read More</a>
</figcaption>
</figure>
<figure class="snip1234">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8q3sxpB_tI-hTiqG8KnL94oTCs6lHcAGxJ-MFOX6np-qLmsLsicn9fvZsD7SOSQbllv8os-bIqz0Pe8BLpF7nhX76P01cz5-T3ifJPilxi6rKrdp3Mrjo30yEcXpkTIkf2ICMi9fuitA/s0/unPlug-Demo-Style-2-3.webp" alt="sample4"/>
<figcaption>
<h3>Themes Gadget</h3>
<p>A website for all blogger templates solutions, blogger widgets, tips & tricks and much more.</p>
<a href="#" class="read-more">Read More</a>
</figcaption>
</figure>
</div>
Step 2 - Adding (Image Caption Hover Effects CSS)
These CSS3 image hover effects with caption are in Compressed format. If you want to beautify, you can use our tool by Following this Link – CSS Beautifier Tool.
<style type="text/css">
.Main-I3CHE{display:flex;justify-content:center;align-items:center;flex-flow:wrap;margin:0;height:100%;font-family:'noto sans',sans-serif;}.snip1234{color:#fff;position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:220px;max-width:310px;max-height:220px;width:100%;color:#262d3d;text-align:left;background-color:#fafafc;font-size:16px;-webkit-perspective:50em;perspective:50em;}.snip1234 *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.6s ease;transition:all 0.6s ease;}.snip1234 img{opacity:1;width:100%;-webkit-transform-origin:0% 50%;-ms-transform-origin:0% 50%;transform-origin:0% 50%;}.snip1234 figcaption{position:absolute;top:50%;left:0;width:100%;-webkit-transform:rotateY(-90deg) translate(0%,-50%);transform:rotateY(-90deg) translate(0%,-50%);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%;z-index:1;opacity:0;padding:0 30px;}.snip1234 h3,.snip1234 p{line-height:1.5em;}.snip1234 h3{margin:0;font-weight:800;}.snip1234 p{font-size:0.8em;font-weight:500;margin:0 0 15px;}.snip1234 .read-more{border:1px solid #262d3d;padding:0.5em 1em;font-size:0.8em;text-decoration:none;color:#262d3d;display:inline-block;}.snip1234 .read-more:hover{background-color:#ffffff;color:#000000;}.snip1234:hover img,.snip1234.hover img{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0;}.snip1234:hover figcaption,.snip1234.hover figcaption{-webkit-transform:rotateY(0deg) translate(0,-50%);transform:rotateY(0deg) translate(0,-50%);opacity:1;-webkit-transition-delay:0.2s;transition-delay:0.2s;}
</style>
Step 3 - Adding JavaScript (Jquery Image Hover Effect With Caption)
<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
Hopefully, I’ve given you a code to create responsive image caption hover effects. I hope you like it. Would you please share your thoughts below on which topic you think I should cover next? If you have any questions, please write them down in the comment below.