| Image may be NSFW. Clik here to view.  |
| Rollover social icons |
Social icons in a site or blog holds a important place in turning the visitors to followers and adding hover effects to those icons increase the chance. So we are going to see a cool hover effect that can be used with social icons to perform the assigned job. The above hover effect requires a special image in which two images should be spliced in a vertical manner.
| Image may be NSFW. Clik here to view.  | |
| Spliced Social icons |
We are going to use similar vertically spliced images in this hover effect. The above image was formed by means of two images vertically spliced in order to perform a rollover effect when the image is hovered.
CSS CODE:
|
In the above code class "roll_over" was used to assign the height and width of the background image used. And when the image is hovered the height was assigned by means of negative value to display the next image hiding. Other classes ".facebook", ".twitter" ... ".pinterest" was used to assign the URL of the image used for the effect.
HTML CODE:
|
The HTML part was pretty straightforward, here the class ".roll over" & ".facebook" used in a single <div> container to use the properties of both the classes.
The working demo & spliced images was added for your usage and you can obtain it here Download
Do check the Image hover effects collection for lots of cool hover effects using simple CSS and HTML.
Like this article? Share this with others through social sites and don't forget to follow us. Post your comments and queries regarding this article below. Thank you for visiting & Happy Designing.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.
