CYBER-HEAVEN
PLEASE REGESTER IF U LIKE OUR FORUM

THANX FOR VISITING


IF U WANT TO MODERATE THIS FORUM

REGESTER AND POST 3 NEW TOPICS IN ANY CATEGORY

U WILL BE MADE THE MODERATOR
Search
 
 

Display results as :
 


Rechercher Advanced Search

Latest topics
» GET BEST AUDIO QUALTIY FROM YOUR WINDOWS PC
Thu Oct 03, 2013 12:36 am by Admin

» Dish Network Channel Starz, aim my dish network dish
Thu May 16, 2013 10:02 am by latinnoc

» Dish Network Little Elm Tx & dish network via broadband
Wed May 15, 2013 3:37 pm by latinnoc

» Dish Network Moving Promotions
Wed May 15, 2013 3:06 pm by latinnoc

» Dish Network Twc Channel - what channel is fox 1 on dish network
Wed May 15, 2013 9:00 am by latinnoc

» 005 Error Dish Network
Wed May 15, 2013 8:43 am by latinnoc

» Weta Kids Dish Network
Tue May 14, 2013 3:21 pm by latinnoc

» Dish Network In Augusta Maine
Tue May 14, 2013 2:44 pm by latinnoc

» hack torrent for increase speed using trackers
Thu Apr 11, 2013 4:09 pm by Fauriza

Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

None

[ View the whole list ]


Most users ever online was 18 on Sun Apr 29, 2018 6:49 pm
Social bookmarking

Social bookmarking digg  Social bookmarking delicious  Social bookmarking reddit  Social bookmarking stumbleupon  Social bookmarking slashdot  Social bookmarking yahoo  Social bookmarking google  Social bookmarking blogmarks  Social bookmarking live      

Bookmark and share the address of CYBER-HEAVEN on your social bookmarking website

Top posting users this week

Like/Tweet/+1
BOOKMARK US

IMAGE WITH SLIDING DESCRIPTION

Go down

IMAGE WITH SLIDING DESCRIPTION

Post by Admin on Sat Oct 27, 2012 6:22 pm


This is best CSS3 trick to add an animated description panel to images that slides open when the mouse rolls over the image using CSS3 transitions.If you want to add some description to any image then this trick will surely help you,when any visitor mouse hovers on image the animated panel smoothly comes out with description which you have added.The biggest advantage of this trick is it works with a pure CSS3 i.e. no any heavy JavaScript or any jQuery which can affects loading speed of your blog.Below are the some best feature of this CSS3 trick -

Works with pure CSS3 i.e. no any heavy scripts is needed
Can be use in 4 ways (Up,Down,Left,Down)
Smooth hover effect.
Easy to use and some other features.
,





How To Add Sliding Description Panel To Images?

First we will add CSS code to blog,follow below instruction to add css code,

First go to Blogger Dashboard > Template
Click On Edit HTML
Hit Proceed button
Now find for below code in your template

]]></b:skin>

add below code just above/befor of above code,



.imagepluscontainer {
/* main image container */
position: relative;
z-index: 1;
font-family: verdana;
font-size: 13px;
}

.imagepluscontainer img {
/* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
/* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img {
/* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc {
/* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1;
/* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0;
/* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.Cool;
/* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px;
/* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
/* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.Cool;
/* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.Cool;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.Cool;
-moz-transition: all 0.5s ease 0.5s;
/* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
color: white;
}

.imagepluscontainer:hover div.desc {
/* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity: 1;
/* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide {
width: 150px;
/* reset from default */
top: 15px;
right: 0;
left: auto;
/* reset from default */
bottom: auto;
/* reset from default */
padding-left: 15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide {
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide {
width: 150px;
/* reset from default */
top: 15px;
left: 0;
bottom: auto;
/* reset from default */
padding-left: 15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide {
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide {
top: 0;
bottom: auto;
/* reset from default */
padding-bottom: 10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
}


How To Use It?

While editing post,

Go to Edit HTML tab
Add below below code,

<center><div class="imagepluscontainer" style="width:263px;">
<img src="IMAGE URL HERE">
<div class="desc downslide">
ADD YOUR DESCRIPTION HERE
</div>
</div></center>

Now replace ADD YOUR DESCRIPTION HERE with your description,you can also add links in your description by using this code <a herf="LINK HERE">TEXT HERE</a>
Replace IMAGE URL HERE with your image URL
If you want to change position of sliding panel then just replace highlighted down with up,right or left
Adjust the width of the panel according to image width to adjust width of panel simply edit width:263px;

I hope you have liked i,also post your comments about trick
avatar
Admin
Admin
Admin

Posts : 58
likes : 6
Join date : 2012-10-26

View user profile http://cyber-heaven.forumotions.in

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum