How to Add Shadow and Text Hover Effect to Image on blogger ?

Good Luck... ^_^  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. 

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 HTML3. 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://full-tricks.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... ^_^ 

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel How to Add Shadow and Text Hover Effect to Image on blogger ? ini dipublish oleh Unknown pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan How to Add Shadow and Text Hover Effect to Image on blogger ?