Web Development



Icon Hover CSS

By TylerJWhit ·
I am attempting to use some social icons that change color when hovered over. The problem is that the icons do not seem to respond to the hover psuedo-class and reposition.

Currently, I have two icons on one image at 30px x 60px. I have cropped the image to 30 x 30 to show only half of the image at a time. When the image is hovered over, I told it to reposition the background using background: bottom;

Here is the code:

.mainsocial {
width: 30px;
height: 30px;
float: left;
background-position: bottom;}
.mainsocial:hover {background-position: top;}

{a class="mainsocial" style="background: url('......'); href='......'}{/a}

Obviously the is substitued by {}

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Answers

Share your knowledge

Related Discussions

Related Forums