Simple Mouseover Effect Code For Images andrey понедельник, 22 июня 2015 г. No Comment

DEMO: Hover mouse over the image!

Here are the codes:

• If you have to place image with mouseover effect through "Add & Arrange Page Elements" section on Blogger use this code (this code may work on IE);
  

Code:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM7u3WYk0pUYO90obZQHJXhC06tMObkVV4XNIww4zI8AUaHVbizxMNF6gxnpDQTZ-cQcuntdPGa-T8UjLLVyR5cOoqOV0qWyMpscafnl0GUgOd4qf8xR8Ge7vopT-ObCBeKUbsz9wtkU5L/s1600/Image+5.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAXNehcY2LBPopHxH4bVe579HLB7kUXwWKxx0kbtRaXHEMcdTRqnGaS36B2CR8d9DG2g2NNonULWNmWPSzbHtp2tvs7PTMDi4Dru7IkB4MwAPBL_WTfwfqID-2ORGht2Lcp25CBasniU2/s1600/Image+4.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAXNehcY2LBPopHxH4bVe579HLB7kUXwWKxx0kbtRaXHEMcdTRqnGaS36B2CR8d9DG2g2NNonULWNmWPSzbHtp2tvs7PTMDi4Dru7IkB4MwAPBL_WTfwfqID-2ORGht2Lcp25CBasniU2/s1600/Image+4.png'" />

• If you have to place image with mouseover effect through "Edit HTML" section on Blogger use this code (this code may not work on IE);
  

Code:

In the above codes replace the RED texts with the URL of the main image and the BLUE texts with the URL of the hover image.

 

DEMO: Hover mouse over the image!

Here are the codes:

• If you have to place image with mouseover effect through "Add & Arrange Page Elements" section on Blogger use this code (this code may work on IE);
  

Code:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM7u3WYk0pUYO90obZQHJXhC06tMObkVV4XNIww4zI8AUaHVbizxMNF6gxnpDQTZ-cQcuntdPGa-T8UjLLVyR5cOoqOV0qWyMpscafnl0GUgOd4qf8xR8Ge7vopT-ObCBeKUbsz9wtkU5L/s1600/Image+5.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAXNehcY2LBPopHxH4bVe579HLB7kUXwWKxx0kbtRaXHEMcdTRqnGaS36B2CR8d9DG2g2NNonULWNmWPSzbHtp2tvs7PTMDi4Dru7IkB4MwAPBL_WTfwfqID-2ORGht2Lcp25CBasniU2/s1600/Image+4.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAXNehcY2LBPopHxH4bVe579HLB7kUXwWKxx0kbtRaXHEMcdTRqnGaS36B2CR8d9DG2g2NNonULWNmWPSzbHtp2tvs7PTMDi4Dru7IkB4MwAPBL_WTfwfqID-2ORGht2Lcp25CBasniU2/s1600/Image+4.png'" />

• If you have to place image with mouseover effect through "Edit HTML" section on Blogger use this code (this code may not work on IE);
  

Code:

In the above codes replace the RED texts with the URL of the main image and the BLUE texts with the URL of the hover image.

 

Tweet

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Effect / Images / Mouseover / Simple