sweetloveis: Animated caption effect on mouse over

new add

Enter Title 1 Here
http://3.bp.blogspot.com/-bVQYYMHYBHc/ThqNj77ZksI/AAAAAAAABQw/MhQA40yqFVg/s1600/whowear1.jpg
Enter Description 1 Here.
Enter Title 2 Here
http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRePsmefI/AAAAAAAAAaE/1bEo7Jhje7Y/slideshow+2+big.jpg
Enter Description 2 Here.
Enter Title 3 Here
http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRlhta4NI/AAAAAAAAAaU/91As7SkDIZE/slideshow+3+big.jpg
Enter Description 3 Here.
Enter Title 4 Here
http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRudm44wI/AAAAAAAAAak/xPjT8DtBq9s/slideshow+4+big.jpg
Enter Description 4 Here.
Enter Title 5 Here
http://1.bp.blogspot.com/_4HKUHirY_2U/SxIR4NEkreI/AAAAAAAAAa0/B0ab0ypP_z4/slideshow+5+big.jpg
Enter Description 5 Here.
Enter Title 6 Here
http://1.bp.blogspot.com/_4HKUHirY_2U/SxISBN5s6XI/AAAAAAAAAbE/jYBV3sn5y8o/slideshow+6+big.jpg
Enter Description 6 Here.
Enter Title 7 Here
http://1.bp.blogspot.com/_4HKUHirY_2U/SxISHlkmzLI/AAAAAAAAAbU/gbpIfiAelH0/slideshow+7+big.jpeg
Enter Description 7 Here.
Enter Title 8 Here
http://3.bp.blogspot.com/_4HKUHirY_2U/SxISPRJ9FyI/AAAAAAAAAbk/col8cO-Gtc8/slideshow+8+big.jpg
Enter Description 8 Here.
Enter Title 9 Here
http://1.bp.blogspot.com/_4HKUHirY_2U/SxISVrBaCgI/AAAAAAAAAb0/7TyVFfKbqyc/slideshow+9+big.jpg
Enter Description 9 Here.

Step 1:   Save your Template before you try something, it will help you when something goes wrong with your editing.


Step 2:  Next goto >> Design >> Edit Html >> search for </b:skin> >>  and paste this code above it

/* Post images with CSS animated captions by Blogger Bits */


#post-image {
}

#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;
}

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

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

Step 3: Then while you are uploading a image in your post, upload the image, copy the link and paste it here in this code

<span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><pre><div id="post-image">

<div id='figure'>
 <img src="image-link-url here"/>
 <span class='caption'>
 <b>Image Title here</b>
 Image description goes here.
 </span>
 </div>
</div></pre></span>DEMO

sweetloveis

new add

Enter Title 1 Here

Enter Title 2 Here

Enter Title 3 Here

Enter Title 4 Here

Enter Title 5 Here

Enter Title 6 Here

Enter Title 7 Here

Enter Title 8 Here

Enter Title 9 Here

tags

Animated caption effect on mouse over - blogger

facebook