How To Add Different Hover Effects To Images In Blogger Post

Changing colors or texts while the mouse points at a certain image in a blog is amazing display of one's hard work and creativity. 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.

DEMO HERE:

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/AVvXsEiJYh1x758ETxL5-4-PMGXQxAiFRQmw7zldSLz3gArpAMbJz1aR8SBqEG0ENjZaknwXRN6pKigsLb74XSQLcGegPUZdD3aEH3UTMr3QtFpaY5-lfzEUC68N8EqbhFmkGm_FQhky1B0fHMs/s1600/MY+FAMILY.jpg'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzP2bFngP0tNNIYTt6mvWqvcdYaRRUexfGzrmd5mk_pkp3RTTHn8J-b6TqqMwQhxtIK6FgYv6_1XzKOwyZt5PHtx1zvCEYBcUm33vtR_aJjLwpUQDBcIvcOdAakdm595oPiVQYjy5h1g/s1600/KATES.jpg'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq_jhtRS7iwKgWXghjs82BjXwaun_O3LJzUCN6ocubntFbh23Zg2kmbq0LH4GfxctuSHC691g_lar7wzXtMYTsbS45-bMF7W40__2yfFNTFbXurvJluve7XVmGcI9l7m2LUPnDdxgCC4w4/s1600/hover+effect+on+images+from+blockquote+2.png" />

Customization 

The red bold text 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/AVvXsEh19UlE80u3T86FtL5TBM96zcEwn4MfLhVhgoFIzFfFfmDCIOE6RwM8fJpCvrzGTxILKEIX-hyluNmSmpMd1w8XEFVx41zR0iOtiC04s3646k3ypBNXtGpYgtR0dMZ-K-uufBa28HtIEOgu/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/AVvXsEh19UlE80u3T86FtL5TBM96zcEwn4MfLhVhgoFIzFfFfmDCIOE6RwM8fJpCvrzGTxILKEIX-hyluNmSmpMd1w8XEFVx41zR0iOtiC04s3646k3ypBNXtGpYgtR0dMZ-K-uufBa28HtIEOgu/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:

<br />
<div class="vertpan pic">
<img alt="vertical hover effect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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/AVvXsEj2alKBoeDovrMn0sU-Lft3ruTUSG0wwARJmKwHKgDT8YFR8Oxh9V2QZBwA44FrvXJvFkJuF-DKPHxgdojk-Ty1W4tzzCSxXNOcFDBNz4nJ0BFngrXDHIDTQdBWIIUhLAnhxJjkY_j_vWSk/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 chosen 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.

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.

God Bless Folks!