CSS sliding effects of social links

When we hover over the share button, the social links move to the right (sliding effect). This is a new animation of links made by web4college.

right sliding of links

.socialLinks

<style>
.socialLinks{
position:relative;
left:0px;
}
</style>

The position:relative property moves .socialLinks class element relative to the original position.

.socialLinks ul

<style>
.socialLinks ul{
list-style-type:none;
background-color:red;
width:200px;
padding:23px;
position:absolute;
}
</style>
Try </>

Temporarily define background-color of the ul.

We randomly define width and padding properties of the ul element.

position:absolute property positions the ul element.

.socialLinks ul li

<style>
.socialLinks ul li{
float:left;
}
</style>
Try </>

float property aligns the list items in a line.

.socialLinks ul li a

Now we define the properties for the a element.

<style>
.socialLinks ul li a{
display:block;
padding:23px;
position:absolute;
top:0px;
left:0px;
border-radius:7px;
background-position:center;
}
</style>
Try </>

display:block property converts the inline elements to block level element.

padding:23px property defines the size of the image links.

position:absolute property aligns the elements with respect to the parent element.

background-position property represents the central part of the image in the link. We'll add images in the next example.

images for the individual links

Now we assign individual classes to the indivisual elements. Remove the inline CSS for the 'background-image' and add in internal CSS.

<style>
.socialLinks ul li a.li{
background-image:url("share-icon.png");
}

.socialLinks ul li a.go{
background-image:url("google+-icon.png");
}
.socialLinks ul li a.fa{
background-image:url("facebook-icon.png");
}
.socialLinks ul li a.tw{
background-image:url("twitter-icon.png");
}
</style>
Try </>

background-image property adds image for the background of links.

:hover pseudo class for animation

When a user hovers over the 'share-icons.png' image link, the other links move to the right side.

<style>
.socialLinks ul:hover li a.go{
left:60px;
}
.socialLinks ul:hover li a.fa{
left:120px;
}
.socialLinks ul:hover li a.tw{
left:180px;
}
</style>
Try </>

We don't move the link that has share-icon.png image. Other links should be moved on mouse hover.

The first link that has .go class moves 60px away from the left side on mouse hover.

The second link that has .fa class moves 120px away from the left side on mouse hover.

The second link that has .tw class moves 180px away from the left side on mouse hover.

Animations

we add animations to soften the movement of links.

<style>
.socialLinks ul:hover li a.go{
animation:go 0.7s 1;
}
.socialLinks ul:hover li a.fa{
animation:fa 0.7s 1;
}
.socialLinks ul:hover li a.tw{
animation:tw 0.7s 1;
}
</style>
Try </>

go, fa and tw are the name of animations. The animation-duration is 0.7s. And the animation-iteration-count is 1.

The following are the animations.

<style>
@keyframes go{
0%{
 left:0px;
}
100%{
 left:60px;
}
}

@keyframes fa{
0%{
 left:0px;
}
100%{
 left:120px;
}
}

@keyframes tw{
0%{
 left:0px;
}
100%{
 left:180px;
}
}
</style>
Try </>

Now it's almost ready. We add an additional thing to avoid errors if used in a web.

Initially define the width of the ul to be 0px.

But when user hovers the mouse over ul, the width of ul should be increased from 0px to 220px.

<style>
.socialLinks ul{
width:0px;
}
.socialLinks ul:hover{
width:200px;
}
</style>
Try </>

left sliding of links

The links are moving to the right side. If we want the links to move on the left side, then all the left keyword should be changed right keywords.

<style>
.socialLinks{
position:relative;
right:0px;
}
.socialLinks ul{
right:0px;
}
</style>
Try </>

sliding of links to bottom

To move the links to the bottom side, replace all the left keywords by top keywords. In this case,the height of ul should be changed instead of width.

<style>
.socialLinks{
position:relative;
left:0px;
}
.socialLinks ul{
height:0px;
}
.socialLinks ul:hover{
height:200px;
}
</style>
Try </>