How To Add Shadow and Text Hover Effect to Image

Hover effect is an affect that active when you put your cursor on an object, for example an image. Effect that produced are so many.
To know the steps, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

#image-hover {
}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}


#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}


#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}


#figure:hover .caption {
margin-bottom:0px;
}


#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#B1D7F0;
color:#B1D7F0;
font-family: Arial, Helvetica, sans-serif;
}


#image-hover .caption b {
text-shadow: 0px 2px 0px #B1D7F0;
}
#image-hover .caption {
color: #000000;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}

4. Then, to active the hover effect, just use this code below

<div id="image-hover">

<div id='figure'>

<a href="http://s2ptech.blogspot.com/" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1UWEnAOhqGfE88ZElxAs55OkSBV3QaNSuCGw3OndtZy2LYwbRXHe41cHHREC7jzz9bSM9ulGEdtxH4xkxOUbu8pRKWPegtTxvYHUwrVIDK71EGd9PXY4KuC4kegoXX3KzBnkvi5IbmJ/s1600/untitled.bmp"></a>

<span class='caption'>

Everything For Geeks

</span></div></div>

=> Replace the red code with your link
=> Replace the green code with your image URL
=> Replace the orange code with your image text

Go For Demo