Follow us to get updates regarding Latest posts Follow Now!
Home
Code
Tutorials

How To Make Responsive Image Hover Effect In Blogger

In this article I have made a step-by-step Tutorial on How To Make Responsive Image Hover Effect In Blogger, I hope you have liked this Image Hover

In this article I have made a tutorial on How To Make Responsive Image Hover Effect In Blogger

how-to-make-responsive-image-hover-effect-in-blogger

Hello Guys ! Welcome back to Techy DarshaN, Toady or tutorial is How To Make Responsive Image Hover Effect In Blogger. 

In my previous article I have made a tutorial on How To Add Auto Cool Emoji Reaction Widget In Blogger Go and check it out if you haven't yet !

When it comes to websites, pictures matter the most because they are very important to grab the attention of the visitor.

To the grab the user attention many websites use different effects and styles for their images and one of them is Image Hover Effect , So in this article I am providing you guys tutorial on Image Hover Effect In Blogger. Follow all simple steps to implement in your Blogger Site .

What Is Image Hover Effect 

Image Hover Effects are the most important of many website designs like Enlarging image or when cursor is brought on the image or they can trigger multi hover animation .

Hover effects makes an interactivity and motion to a design, making for a more dynamic website experience. Whether they indicate an active link or trigger a burst of animation, hover effects give you instant effect when cursor is brought on it. They can guide visitors to take a desired action or act as an artistic embellishment that livens up a digital space and Hover Effect is used to grab users attention. 

Pros Of Image Hover Effect 

  1. Grab attention of your visitors
  2. New Hover Effect For Your Images
  3. Change Your Default Image Look To This New Effect
  4. Dynamic Look Your Website

Let' Begin !

Before starting watch a Demo of Image Hover Effect In blogger 

Demo

How To Make Responsive Image Hover Effect In Blogger

There are 3 Mainly 3 steps to add Image Hover Effect In your Blogger . You need to add HTML, CSS and JS, follow given below simple steps.

Step 1 : Copy and paste the given below HTML code in a post/page where you wanna add this Image Hover Effect
<div class="Main-IH3"><figure class="snip1543">
  <img alt="sample108" src="https://blogger.googleusercontent.com/img/a/AVvXsEimrwS_MJ9ewLpOkRIZqr93gcXRN_ZWrqcu-QkWO_jQJkVGuI8D0xeJeqVGc7JMcInTIxR7XYRkkcuUVXkrH18dwD6oCdunZm6YRqepxeockEQkZQRYZ98DEA8uoZk8XHDIAxv4wGMBqfSZcHksvqfJ_LOCnG5bSQ6yYE71XkSY6NHyX-G14gudRhPhGg" />
  <figcaption>
    <h3>Techy DarshaN</h3>
    <p>Blogger Tips &amp; Tricks</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1543"><img alt="sample100" src="https://blogger.googleusercontent.com/img/a/AVvXsEgJ8tI0KbWLuQ1k7NM7N2Hxeffu2hXQ1YxJaQbSMiLfY8scm3QcPjTiB6PJeRufiBDN9sXSDBbXZAuf6YH21JkRD1qBHcETGotBHvuaqg7UIMXmvkfdKzaDJjmhuhd_csfOskzkze2V6c27HywxpI-ZYF_3KOwEhM-zxSYCAiVXLzsYITdBS2iQMnoqLg" />
  <figcaption>
    <h3>Image Hover Effect</h3>
    <p>Blogger Tips &amp; Tricks</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1543"><img alt="sample101" src="https://blogger.googleusercontent.com/img/a/AVvXsEiAjRZVwU8i6tmQFA0e9C8p2qJC7HtgerGMCsQDhgk-6_A1bC-iYeMImcjNqg9AyMkR6h8MktKOVAvYux3sPYVzmf6qpyG4w2ODWATKXVFWISU1ln6Cl4fqh7EIcQbkEI1LuM7h8D9xuudaJ2J-RCgeoHwg0y-ucveLAVY7UbVFC7FeJ-9OuDtQYiKYhg" />
  <figcaption>
    <h3>Techy DarshaN</h3>
    <p>Widegts and codes</p>
  </figcaption>
  <a href="#"></a>
  </figure></div>

Change The Highlighted Text And Your Title, Image Link and Description according to your requirement

Step 2 : Copy and paste the given below CSS In to your post/page if are only using this Image Hover Effect in particular post/page or else you can paste this CSS above ]]></b:skin>.

If your adding this CSS into your theme You can minify and Compress CSS by my free tool Css Minifier for better experience 

<style>
  @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Teko:700);
  
  .Main-IH3{display:flex;justify-content:center;align-items:center;flex-flow:wrap;margin:0;height:100%;}
.snip1543 {
  background-color: #fff;
  color: #ffffff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 10px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.snip1543 *,
.snip1543 *:before,
.snip1543 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1543 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip1543:before,
.snip1543:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color:#ff4a03;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1543:before {
  -webkit-transform: skew(30deg) translateX(-80%);
  transform: skew(30deg) translateX(-80%);
}

.snip1543:after {
  -webkit-transform: skew(-30deg) translateX(-70%);
  transform: skew(-30deg) translateX(-70%);
}

.snip1543 figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 25px 40% 25px 20px;
}

.snip1543 figcaption:before,
.snip1543 figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #b81212;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}

.snip1543 figcaption:before {
  -webkit-transform: skew(30deg) translateX(-100%);
  transform: skew(30deg) translateX(-100%);
}

.snip1543 figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-90%);
  transform: skew(-30deg) translateX(-90%);
}

.snip1543 h3,
.snip1543 p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip1543 h3 {
  font-family: 'Teko', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.snip1543 p {
  font-size: 0.9em;
}

.snip1543 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.snip1543:hover:before,
.snip1543.hover:before {
  -webkit-transform: skew(30deg) translateX(-20%);
  transform: skew(30deg) translateX(-20%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.snip1543:hover:after,
.snip1543.hover:after {
  -webkit-transform: skew(-30deg) translateX(-10%);
  transform: skew(-30deg) translateX(-10%);
}

.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(-40%);
  transform: skew(30deg) translateX(-40%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-30%);
  transform: skew(-30deg) translateX(-30%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
  
</style>

If Want To The Background Colour Change The Highlighted Colour Code

Step 3: Copy and paste the given below javascript just into post/page. You can also minify this Javscript by free tool Javscript Minifier

 <script>
  /* Demo purposes only */
$(".hover").mouseleave(
  function() {
    $(this).removeClass("hover");
  }
);
  
</script>

Conclusion 

In this article I have made a step-by-step Tutorial on How To Make Responsive Image Hover Effect In Blogger, I hope you have liked this Image Hover Effect. If want more Image Hover Styles like this please let me know in comments section.

If you face any issues in code or if you have any questions feel free to ask in comments section or Join our Telegram Group for discussion.

About the Author

Student | Developer | Blogger
#Code #Tutorials

Post a Comment

Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.