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" />
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!
