logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$15
rollover effect on text & icon

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>sales@rocksolidroofing.com.au

Email Direct</div>

[/one_half_last]

This question has been answered.

cmwwebfx | 07/13/12 at 7:53am Edit


(3) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    07/13/12
    8:00am
    Arnav Joy says:

    i can help you implementing this , can you show a screenshot how you want it..

  • avatar
    Last edited:
    07/13/12
    8:13am
    Martin Pham says:

    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@email.com</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;
    
}

    Previous versions of this answer: 07/13/12 at 8:13am

    • 07/13/12 9:26am

      Martin Pham says:

      :)


      
<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>
      
						sales@rocksolidroofing.com.au
      
						<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 http://c.marxcdn.com/m145/

      Please download attachment (sprite.png)

      Attached Image

    • 07/13/12 12:21pm

      cmwwebfx says:

      Hi Martin, I tried your solution first, and it didn't give me exactly what I needed. What I wanted was the top line only to hover another colour and be larger font. However I liked the way you made 1 sprite image, it is smart thinking there for sure. As this is the first time I have used WP Questions, I am not sure just how I select a first answer below from Manoj as the solution that I have used, but I love your answer of using 1 simple sprite image. I will try combine both your answers... Thank you very much.

  • avatar
    Last edited:
    07/13/12
    8:16am
    Manoj Raj says:

    The solution is the following

    <div class="phone"><a>0450 012 012<br/>
    <span>Phone Direct</span></a></div>



    And for css

    .phone a { display: block; padding-left: 40px; background: url("http://203.170.85.26/~rocksoli/wp-content/uploads/2012/07/phone-sprite-e1341813357532.png") no-repeat 0 0 transparent; }

    .phone a { color: whatever; }

    .phone a span { color : whatever; }

    .phone a:hover { background: url("http://203.170.85.26/~rocksoli/wp-content/uploads/2012/07/phone-sprite-e1341813357532.png") no-repeat 0 -30px transparent;}

    .phone a:hover { color: whatever; }

    .phone a:hover span { color: whatever; }


    You need to change the sprite a bit to center the image....

    • 07/13/12 8:21am

      Manoj Raj says:

      I have attached the revised sprite for the phone icon

      Attached Image

    • 07/13/12 8:40am

      Manoj Raj says:

      Try the following whether it is okay... you can change any property you want...

      <div class="email"><a>sales@rocksolidroofing.com.au<br/>
      
<span>Email Direct</span></a></div>
      

      

      
.email a { display: block; padding-left: 55px; background: url("http://203.170.85.26/~rocksoli/wp-content/uploads/2012/07/mail-sprite.png") no-repeat 0 0 transparent; font-weight: normal; font-size: 14px; line-height: 14px; }
      

      
.email span { color:lightgray; font-size: 12px; }
      

      
.email a:hover { background: url("http://203.170.85.26/~rocksoli/wp-content/uploads/2012/07/mail-sprite.png") no-repeat 0 -30px transparent; font-weight: normal; font-size: 14px; line-height: 14px;}

    • 07/13/12 12:16pm

      cmwwebfx says:

      Hi, this was the best answer so far, I have cleaned up the css a bit to suit, but it gives me the closest to what I needed.
      However, I would like to have given each of those 2 divs some width.

    • 07/15/12 12:34am

      cmwwebfx says:

      Hi Manoj,
      I have hit a snag using your code. I can no longer use the email us direct as a link to mailto: we would like to keep the rollover effect, but maintain the link to open up an email.

    • 07/15/12 12:43am

      cmwwebfx says:

      This is what I tried, but doesn't work.
      <div class="email"><a title="Email Direct" href="mailto:sales@rocksolidroofing.com.au"> sales@rocksolidroofing.com.au</a>
      <a title="Contact Us" href="http://203.170.85.26/~rocksoli/contact-us/"><span>Email Direct</span></a></div>

This question has expired.



Hai Bui, cmwwebfx voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.