fade between icon sprite image with text

Question

I'm trying to edit a link with icon to fade between colors. I'm using :before for background image which is a sprite, because I couldn't figure how to change the color of the icon using only css when it's only png file.

I found this post which might be an answer( CSS3 - Fade between 'background-position' of a sprite image) and tried to modify it to my needs but it's not working...

Here's the code and the codepen demo in action (http://codepen.io/kikibres/pen/KpjZKM):

HTML

<div id="button"><a href="#">Button</a></div>

CSS

#button{
  display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
    /*float:                  left;*/
    background-image:       url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
    background-position:    0 0px;
    background-repeat:      no-repeat;

    width:              30px;
    height:             30px;
  transition:         opacity 0.4s ease-in-out;
    -moz-transition:    opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    -o-transition:      opacity 0.4s ease-in-out;

}
#button a:hover:before{
  content: "";
    background-image:       url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
    background-position:    0 -29px;
    background-repeat:      no-repeat;

    width:              30px;
    height:             30px;

    display:            inline-block; 
    /*text-indent:        -9999px;*/ 

    /*transition:         opacity 0.4s ease-in-out;
    -moz-transition:    opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    -o-transition:      opacity 0.4s ease-in-out;*/
   opacity:            0;
}
/*#button a:hover:before 
{ 
    opacity:            0.4; 
}*/

How do I fix it so that it'll fade from one color to another...

* Update * With some help from others (thanks, everyone!), I was able to edit the code. However, it doesn't line up in the middle like I wanted. Here's the actual link that I'm using for a website. The first code displayed was just an example to see how I can make it work. Anyway, I finally separated the icon and the text by using span, but now I'm trying to tie them together by using "+" in the css, but it's not working. Here's the codepen code: http://codepen.io/kikibres/pen/GJbQKq

HTML

<div id="button"><a href="#"><span></span>Free Consultation</a></div>

CSS

body {
background-color: #121e34;
}
#button{
  display: block;
  width: 100%;
}
#button a {
  display: inline-block;
    position: relative;
    /*text-indent: 80px;*/
    /*width: 100%;
    height: 52px;*/
    /*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
  text-decoration: none;
  text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover  {
color: #f68e07;
}
#button a span {
    position: relative;
  display: inline-block;
    /*top: 0; left: 0; bottom: 0; right: 0;*/
    background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
  width: 66px;
  height: 52px;
  margin-right: 15px;
  vertical-align: middle;
}
#button a span:before {
  content: "";
  /*display: inline-block;*/
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
  background-position: 0 -52px;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}
#button a span:hover:before {
    opacity: 1;
}

As you can see from this new codepen code, if you hover over the icon, both the icon and the text work, but if you hover over the text, only the text works. How do I fix it?

Your fiddle is working http://jsfiddle.net/DIRTY_SMITH/7oebee2m/8/ what is not working? — Adam Buchanan Smith, Aug 20 '15 at 22:09
the fading of the icon isn't working. I want it to change colors in an image sprite. The other post that I posted was for an icon sprite that successfully changed colors, but the problem is that it didn't have text. I was trying to modify it to have text. — Kristina Bressler, Aug 20 '15 at 22:17

score 1 · Answer 1 · answered Aug 20 '15 at 22:43

You've to apply the different image styles on different DOM elements, once it's the anchor tag and the second one is the span (in my example), and then switch the opacity of the different positioned background. CodePen Link

SNIPPET

.button {
 display: inline-block;
 position: relative;
 text-indent: 30px;
 width: 36px;
 height: 30px;
 background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
  text-decoration: none;
  font-size: 1.5em;
  transition: color 0.4s ease;
  line-height:1.5em;
}
.button:hover{
  color:#f68e07;
}
.button span {
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
 background-position: 0 -29px;
 opacity: 0;
 -webkit-transition: opacity 0.5s;
 -moz-transition:    opacity 0.5s;
 -o-transition:      opacity 0.5s;
}
.button:hover span {
 opacity: 1;
}

<a href="#" class="button">Button<span></span></a>

Thanks! It works but the problem is that the icon and text isn't vertical-align: middle. This is the actual link that I'm using for a website. The first codepen was just an example to get it to work. This new codepen is the actual link that I'm using: http://codepen.io/kikibres/pen/KpjZKM. I guess that's the reason why I was using :before because it's easier to vertical align the icon and text. — Kristina Bressler, Aug 21 '15 at 00:48

score 0 · Answer 2 · answered Aug 20 '15 at 22:12

0

To change the color, you can incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:

            img {
                        -webkit-filter:grayscale(0%);
                        transition: -webkit-filter .3s linear;
                    }
                    img:hover 
                    {
                        -webkit-filter:grayscale(75%);
                    }

answered Aug 20 '15 at 22:12

anam

216
1
2
14

but it's for img src in the html. The image I'm using is in css background-image which is a sprite... – Kristina Bressler Aug 20 '15 at 22:19

score 0 · Answer 3 · answered Aug 20 '15 at 22:15

0

You have declared opacity: 0; for #button a:hover:before { ... }, that's why it doesn't work in your codepen demo.

answered Aug 20 '15 at 22:15

Chris Yongchu

789
3
8

Did you remove the opacity: 0;? – Chris Yongchu Aug 20 '15 at 22:26
I tried both but no results. All the icon do is to keep jerking back and forth instead of smoothly fading into another. The other post that I posted was for an icon sprite that was successfully changed colors, but the problem is that it didn't have text. I was trying to modify it to have text. (http://stackoverflow.com/questions/15899865/css3-fade-between-background-position-of-a-sprite-image) – Kristina Bressler Aug 20 '15 at 22:34
Ah, since you're working with an image sprite instead of two different images, set the opacity value for `#button a:hover:before` to 1. – Chris Yongchu Aug 20 '15 at 22:43
Here's working example on fiddle for you Kristina, I hope this helps. http://jsfiddle.net/darh78kx/ – Chris Yongchu Aug 20 '15 at 22:51
Where is the text? I tried to take out the text-indent but the text wasn't on the right side of the icon – Kristina Bressler Aug 20 '15 at 23:13
Revised with the text 'Arrow' on the right. http://jsfiddle.net/darh78kx/1/. Hope this helps. – Chris Yongchu Aug 20 '15 at 23:21
Thanks! but can it be vertical-align: middle? I tried to edit it to line up but no success... – Kristina Bressler Aug 21 '15 at 01:02

score 0 · Accepted Answer · answered Aug 21 '15 at 02:01

I got it!!! Thanks everyone for their help! I was able to make it work!!!

Here's working codepen: http://codepen.io/kikibres/pen/LVKQxE

HTML

<div id="button"><a href="#"><span></span>Free Consultation</a></div>

CSS

body {
background-color: #121e34;
}
#button{
  display: block;
  width: 100%;
}
#button a {
  display: inline-block;
    position: relative;
  text-decoration: none;
  text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a span {
    position: relative;
  display: inline-block;
    background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
  width: 66px;
  height: 52px;
  margin-right: 15px;
  vertical-align: middle;
}
#button a span:before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
  background-position: 0 -52px;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}
#button:hover a {
color: #f68e07;
}
#button:hover a span:before {
    opacity: 1;
}

fade between icon sprite image with text

4 Answers4