Multi Hover Effect On Blogger Images Using Pure CSS

Today I will show you how to add a great mouse ear effect to blogger images using just CSS where you move the mouse over an image from different directions (up, down, etc.) in the same vector. This trick not only changes the look of the images as you scroll through them, but also allows you to add descriptive text.

You can see the effect in this image below: Try moving the mouse left, right and up.

moves right moves up moves left moves down

Add view effects from different directions to bloggers images

The first thing you need to do is add some CSS styles to our template:

Step 1: Go to the Blogger admin screen's Template section and click the Edit HTML button.

Step 2. Find Note. To find it, click anywhere in the code area, press CTRL + F and type in the search field.

Step 3 Once you have found it, add the following style just above it:

Step 4: Save the template

Let's now add the HTML code, which is nothing but a DIV into which we will insert four TEAM tags with text and an image:

Step 5: Select " Messages ", create a new message , click on the HTML tab ( 1 ) and paste this code into the blank space:

Move the cursor to the right
drive up
Move the cursor to the left
floating background
http://4.bp.blogspot.com/-iNaV2hPrI7Y/UaNY2q0ETiI/AAAAAADi/TjGwDktvlPQ/s1600/flores ">

Add your own text / description for "scroll right", "scroll up", "scroll left" and "scroll down" ( 2 ), and replace the URL highlighted in blue with the image URL ( 3 ) where you want to apply the effect.
Important! Do not click on the Write tab or your changes will be lost.

Step 6. After editing the message, click "Publish " ( 4 ).

And so ... fun! :)