rollover effect on text & icon WordPress

• SOLVED

I have created a sprite image for both phone and email. Beside each of the icons is the text for phone number and contact email.

What I would like is the icon sprites to rollover, the top text/numbers to be 20px, and to change colour when hovered. the bottom line to be 12px light grey.

The rollover effect is to happen so that the icon and text is basically a block. I kind of know exactly what I have to do, but not sure how to implement it as my CSS is at a level of 50%. So what I need is just the right CSS to do this.

The site in question is http://203.170.85.26/~rocksoli/
I have placed the text and icons in the top header area as a text widget for this question.

Here is what I have in the widget.
[one_half]
<div style="phone"><a href="http://203.170.85.26/~rocksoli/wp-content/uploads/2012/07/phone-sprite.png"><img class="alignleft size-full wp-image-107" title="phone-sprite" src="http://203.170.85.26/~rocksoli/wp-content/uploads/2012/07/phone-sprite-e1341813357532.png" alt="" width="30" height="40" /></a>0450 012 012
Phone Direct</div>
[/one_half]

[one_half_last]
<div style="email"><a href="http://203.170.85.26/~rocksoli/wp-content/uploads/2012/07/mail-sprite.png"><img class="alignleft size-full wp-image-105" title="mail-sprite" src="http://203.170.85.26/~rocksoli/wp-content/uploads/2012/07/mail-sprite-e1341813618227.png" alt="" width="30" height="40" /></a>[email protected]
Email Direct</div>
[/one_half_last]

Answers (3)

2012-07-13

Martin Pham answers:

try this for example. Please wait me for ....


<div class="phone"><span class="icon-sprite"></span>0450 012 012 Phone Direct</div>
<div class="email"><span class="icon-sprite"></span> [email protected]</div>



CSS

.icon-sprite {
background-image: url(sprite.png);
background-repeat: no-repeat;
}

.phone span, .email span {
width: 30px;
height: 20px;
display:block;
}
.phone span {
background-position: 0 0;
}
.phone span:hover{
background-position: 0 -40px;
}
.email span {
background-position: 0 -20px;
}
.email span:hover {
background-position: 0 -60px;
}


---

Martin Pham comments:

:)

<div class="one_half">
<div class="phone contact">
<span class="icon-sprite"></span>
0450 012 012<br/>
Phone Direct
</div>
</div>
<div class="one_half last">
<div class="email contact">
<span class="icon-sprite"></span>
[email protected]
<br/>
Email Direct
</div>
</div>


CSS

.icon-sprite {
background-image: url(sprite.png);
background-repeat: no-repeat;
}
.contact {
line-height: 12px;
position: relative;
padding-left: 35px;
}
.contact:hover {
color: #0088cd;
}
.contact .icon-sprite {
position: absolute;
display: block;
width: 30px;
height: 20px;
top: 20%;
left: 0;
}

.phone .icon-sprite {
background-position: 0 -41px;
}
.phone:hover span {
background-position: 0 -61px;
}
.email .icon-sprite {
background-position: 0 0;
}
.email:hover span {
background-position: 0 -20px;
}


Live demo [[LINK href="http://c.marxcdn.com/m145/"]]http://c.marxcdn.com/m145/[[/LINK]]

Please download attachment (sprite.png)