How to Add Different Hover Effects to Images in Blogger Post

I have already seen and read many tutorials regarding on how to add hover effects on images uploaded in our post editor pages and all of them have put CSS code in the template editor's page which has a the same effect to all of our images.  But there are some instances that the hover effect that we want to appear will be different in some of our posts. Have a  your mouse hover at the  image  below as an example.

Hover Effects Demo



Steps in Applying this tweak in your Blog
Step 1. Copy and paste the code below in your Blogger Post Editor page

<img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8D9VhBg5c0-bDaXNL1lpb4t-NXzwJ3sJmAh3boEjSqjTmdxSOksMLCXSXkYBfYdsHYUt2BrQOWklcaUTl9myePpqSmz0LPT6RHnzMjBD8iz_re1RiD-njzzPiP024Stjc8M6xvt9jJMJi/s1600/hover+effect+on+images+from+blockquote+2.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcVJZpBit-C5a5AJ8OuOdqn8CPYWdkkyqDVQ44sCVQOKaAZHMYrIFyZG9QkF_Xijhbl80oDRc2jUMN0gKUU56PH1Ro2qnaX1rB942TajgN_Q3ctzGKgxcSjG46Cx-9ZxqE6Qz34snzoE9/s1600/hover+effect+on+images+from+blockquote.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8D9VhBg5c0-bDaXNL1lpb4t-NXzwJ3sJmAh3boEjSqjTmdxSOksMLCXSXkYBfYdsHYUt2BrQOWklcaUTl9myePpqSmz0LPT6RHnzMjBD8iz_re1RiD-njzzPiP024Stjc8M6xvt9jJMJi/s1600/hover+effect+on+images+from+blockquote+2.png" />

Customization

• The red bolded texts is default image (the image when no mouse hover). Replace it with your own.
• The orange bold  and none bold texts (in italic) is the URL image when mouse  hover on it. Replace it with your own also.

The following next tutorial  will be different since  we will add HTML and  CSS to your template.

---

Zoom In and Out effect

---

 HTML code:

<div class="grow pic">
<img alt="hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCSbDuwz0yDmgskdfMm2D0Cx_sfyfnFCtAoSZ19dz90DGnhFEqsnAX0SKk2-C34fyVrKHYuMbpOlYza2bgkXqXy_iYZdsAlIBgTB1CETdlbhbVlVR97nnJHJ5g3NJwwfPnpiK3qpujLVaS/s1600/hover+effect+slide+left.png" />
</div>

  CSS code for out effect:

/*ZOOM*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}

CSS code for  zoom in effect:

/*ZOOM*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 150px;
  height: 150px;
}

---

Going to Leftside Effect

---

HTML Code:

<div class="leftside pic">
<img alt="hover left side effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCSbDuwz0yDmgskdfMm2D0Cx_sfyfnFCtAoSZ19dz90DGnhFEqsnAX0SKk2-C34fyVrKHYuMbpOlYza2bgkXqXy_iYZdsAlIBgTB1CETdlbhbVlVR97nnJHJ5g3NJwwfPnpiK3qpujLVaS/s1600/hover+effect+slide+left.png" />
</div>

CSS Code:

/*leftside movement*/
.leftside img {
border:20px solid #158aee;
 height: 200px;
  width: 200px;
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.leftside img:hover {
border:20px solid #158aee;
  margin-left: -20px;
}

---

Going to UP Effect

---

HTML Code:

<div class="vertpan pic">
<img alt="vertical hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS Code:

/*VERTPAN*/
.vertpan img {
border:20px solid #158aee;
height: 200px;
  width: 200px;
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.vertpan img:hover {
border:20px solid #158aee;
  margin-top: -20px;
}

---

Tilt Effect

---

HTML Code:

<div class="tilt pic">
<img alt="tilt  hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS Code: 

/*TILT*/
.tilt {
 -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.tilt img{
border:20px solid #158aee;
}
.tilt :hover {
border:20px solid #158aee;
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

---

Morph Effect

---

HTML code:

<div class="morph pic">
<img alt="morph hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*MORPH*/
.morph img {
border:25px solid #158aee;
 -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.morph img:hover {
border:25px solid #158aee;
border-radius: 250px;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
margin: 0;
padding: 0;
margin-bottom:0px;
overflow:hidden;
}

---

Focus Effect

---

HTML code:

<div class="focus pic ">
<img alt="focus hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
  </div>

CSS code:

/*FOCUS*/
.focus img {
border:25px solid #158aee;
 -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.focus img:hover {
border:70px solid #158aee;
border-radius: 250px;
margin: 0;
padding: 0;
margin-bottom:0px;
overflow:hidden;
}

---

Blur Effect

---

HTML code:

<div class="blur pic">
<img alt="blur hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*BLUR*/
.blur img {
border:20px solid #158aee;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
border:20px solid #158aee;
  -webkit-filter: blur(1px);
}

---

Brightness Effect

---

HTML code:

<div class="brightness pic">
<img alt="brightness hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*BRIGHTNESS*/
.brightness img{
border:20px solid #158aee;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.brightness img:hover {
border:20px solid #158aee;
  -webkit-filter: brightness(130%);
}

---

Opacity Effect

---

HTML code:

<div class="opacity pic">
<img alt="opacity hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*OPACITY*/
.opacity {
 -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
       -o-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease;
}
.opacity img  {
border:20px solid #158aee;
}
.opacity:hover {
  -webkit-filter: opacity(50%);
}

---

Invert Effect

---

HTML code:

<div class="invert pic">
<img alt="invert hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*INVERT*/
.invert img{
border:20px solid #158aee;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.invert img:hover {
border:20px solid #158aee;
  -webkit-filter: invert(100%);
}

---

Sepia Effect

---

HTML code:

<div class="sepia pic">
<img alt="sepia hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS Code:

/*SEPIA*/
.sepia img{
border:20px solid #158aee;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.sepia img:hover {
border:20px solid #158aee;
  -webkit-filter: sepia(60%);
}

---

Contrast Effect

---

HTML code:

<div class="contrast pic">
<img alt="contrast hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae3hSAOVUIap9kg90vtNJjKxTpcGfe0oapcsQprf6stZTOuTqTk6apvhjOOm1f7cKZbWLjU-EEja5rEJB58yru7qA5ERU4xnKv_ilxNQ_Q4FTjCLHh5q2qaJVilaXFRVV6q2IX6j6Elw5/s1600/morph.png" />
</div>

CSS code:

/*CONTRAST*/
.contrast img{
border:20px solid #158aee;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.contrast img:hover {
border:20px solid #158aee;
  -webkit-filter: contrast(50%);
}

Customiztion with the above codes:

• For the HTML code, change the red bold texts with your own URL image. 
• For the CSS code, change the border styles and size in default (bold black). You can click this link for various  border styles.
• The orange bold texts are responsible for hover effect of your border (size, styles and color), change it also according to your preferences.

Implementation:
This is for the putting of the CSS code
Step 1. Go to Blogger Dashboard >> Template (back your template for your reference).
Step 2. Click the Edit HTML button
Step 3. In the HTML editor's page, control F or find the the code ]]></b:skin>
Step 4.  And just above ]]></b:skin> , paste the CSS code of your choosen hover effect styles.
Step 5. Save your Template (you are now halfway done).

This is for the adding of the HTML code

Step 6. In your Blogger post editor's page, paste the HTML code above (must match with your chosen CSS code also).
Step 7. Save or update your post and you're done.

 Also Check These Posts:

• How To Add A Vintage Style To Images In Blogger Using CSS
• Adding A Nudging Effect To Links And Images In Blogger
• How To Upload Images In Blogger And Get The Image Link

IF you have some question regarding this post, feel free to leave it at our comment box below..I will do my best to answer it for you pal.
God Bless and Happy Blogging to all Us!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook