Home
blogger
how to

How to make Floating image hover effect for Blogger

How To Rank The Search for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to make Floating image hover effect for Blogger.

Benefits :-

  1. New custom look.
  2. Floating hover effect.
  3. border added to the image.
Let's Start
Demo

How to make Floating image hover effect :-

Step 1 :- Go To Blogger's Dashboard.
Step 2 :- Create New Post or Page or edit one.
Step 1 :- Click the pen button and press HTML view.
Step 3 :- Copy and paste the below provided code
<style>
.imgFl img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 100%;
  height: 100%;
}

/* Hover effect */
.imgFl img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
}
</style>
<div class='imgFl'/>
  <img src="#" />
</div>
Step 5 :- Replace all the blue background marked parts with your keywords.

Don't forget to replace # with you image url and click save.

Post a Comment