Making Responsive Image Hover Effect In Blogger
Hello Guys ! Welcome back to Techy Shikari, Toady our tutorial is Making Responsive Image Hover Effect In Blogger.
If you want to atrract users to your website, you can use different styles and effects. One of the styles and effects is Image Hover Effect, So I'll provide tut for Adding Image Hover Effect In Blogger.
Follow these steps to apply hover effect.
Image Hover Effect? What's it?
You would have seen many websites where, when you bring cursor to the images the enlarge or expands or starts a hover animation.
Hover Effect takes place when the visitor hovers ( moves cursor ) on the element to which the effect has been applied.
Advantages Of Adding Image Hover Effect to Blogger
- Steals the attention of the visitors
- Provides a hover effect to the images
- Gives new effect to your old simple looking images
- Gives your website a dynamic look
Making Responsive Image Hover Effect In Blogger
You just have to add the "html","css" and "javascript" below. Just follow the steps , it is very easy
Step 1 : Paste this HTML code to the post/page where you want to use hover effects.
<div class="Main-IH3"><figure class="snip1543">
<img alt="sample108" src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tA61_EDUAvQ9xKUF8zRq-t5Ot-RcZYo-vY_aVUH0ngQ27CK3D174fG77RUcs2ggtBRtN8kAEFJQaaIow9N8jyEVooQOqqpkCqS4zKZ5LgoG3MTEMWCU1_ymx0yrKa3h0Md56c3qH8Wlv03zFIICHZLrznd0A47gdU2zkiAaX4WBIdKLXeSx1Eolj/s320/20220830_234125.png" />
<figcaption>
<h3>Techy Shikari
<p>Blogger Tips & Tricks</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1543"><img alt="sample100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tA61_EDUAvQ9xKUF8zRq-t5Ot-RcZYo-vY_aVUH0ngQ27CK3D174fG77RUcs2ggtBRtN8kAEFJQaaIow9N8jyEVooQOqqpkCqS4zKZ5LgoG3MTEMWCU1_ymx0yrKa3h0Md56c3qH8Wlv03zFIICHZLrznd0A47gdU2zkiAaX4WBIdKLXeSx1Eolj/s320/20220830_234125.png" />
<figcaption>
<h3>Image Hover Effect</h3>
<p>Blogger Tips & Tricks</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1543"><img alt="sample101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tA61_EDUAvQ9xKUF8zRq-t5Ot-RcZYo-vY_aVUH0ngQ27CK3D174fG77RUcs2ggtBRtN8kAEFJQaaIow9N8jyEVooQOqqpkCqS4zKZ5LgoG3MTEMWCU1_ymx0yrKa3h0Md56c3qH8Wlv03zFIICHZLrznd0A47gdU2zkiAaX4WBIdKLXeSx1Eolj/s320/20220830_234125.png" />
<figcaption>
<h3>Techy DarshaN</h3>
<p>Widegts and codes</p>
</figcaption>
<a href="#"></a>
</figure></div>
Just change the text, title and image link , description with yours.
]]></b:skin>.You can minify this css if you are adding this in you theme by my tool Css Minifier for bettter 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 you Want To change The Background Colour Change then use The Highlighted Colour Code
Step 3: Paste the given below js just into post/page. You can also minify this Javscript by using my free tool Javscript Minifier <script>
/* Demo purposes only */
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
</script> Conclusion
I have given a tutorial on Making Responsive Image Hover Effect In Blogger, I hope it helped. Let me know if you have any doubt or you can join us on telegram.
Rate this article
Getting Info...
Post a Comment