Shadow and Text Hover Effect to Image

Shadow and Text Hover Effect to Image | https://tipsandtricksfor.blogspot.com/2011/05/shadow-and-text-hover-effect-to-image_10.html

Hi guys! Thank you for your visit. Have you hear about hover effect? 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. For example Shadow and Text Hover Effect to Image. I will give the demo.

Blogger tricks, hacks, widgets.

Interested? 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 rel="nofollow" href="http://tipsandtricksfor.blogspot.com/" target="_blank">
<img src="http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg"></a>
<span class='caption'>
Blogger tricks, hacks, widgets
</span></div></div>

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

Good Luck... ^_^

Loading Related Posts