Question: I have a scenario in which I have a team page with pictures and some blurb. Under each picture I have social media links much like the following:

[![enter image description here](https://i.stack.imgur.com/qlk2S.jpg)](https://i.stack.imgur.com/qlk2S.jpg)

These are images that sit within a horizontal list underneath each item using the below base markup.

```
<ul>
    <li>
        <a><img src=""/></a>
    </li>
    <li>
        <a><img src=""/></a>
    </li>
</ul>

```

At the moment these are images but I would very much like if when hovered the grey inards of these images turned blue.

I was thinking just have a span with a background image like this:

```
<a><span class="linkedin"></span></a>

.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}

.linkedin:hover{
    height:28px;
    width:auto;
    background-image:url(link/to/the/linkedin/picture-blue-version)
    }

```

However, when I attempted this the space was empty instead of taking the size of the image.

If I enter   as content I get a small part of the background image, furthermore giving the class an absolute position takes it out of document flos 

Is this the ideal approach?

Answer: 
The problem is if you use a `<span>` element you need to set it to `display: inline-block` and you need to set a `width` for the image to show up. Then it works, here is a demo:

```css
.linkedin {
  display: inline-block;
  width: 140px;
  height:100px;
  background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}

.linkedin:hover {
  background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}
```

```html
<a href="#"><span class="linkedin"></span></a>
```

As you see on the first `:hover` it flickers. Cause it will not load the image bevore you `:hover` the first time. This is why you should consider another solution. Like mentioned in some comments you could use <http://fontawesome.io/icons/> and then just change the color. 

To prevent flickering you could do the same with using `<img>` tags then the source will be loaded and ready to be shown on `:hover`. But it works best with also setting positions, demo like so:

```css
a.special {
    position: relative;
}

a.special img {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

a.special img:first-child {
    visibility: visible;
}

a.special:hover img:first-child {
    visibility: hidden;
}

a.special:hover img:last-child {
    visibility: visible;
}
```

```html
<a class="special" href="#">
    <img src="http://ipsumimage.appspot.com/140x100,ff7700">
    <img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>
```
Best approach for this is to use SVG's and change the fill of the SVG on hover.

Your approach should work however, it might be that you've not got the correct size image? try 'background-size: cover;' Or that the element has no width. Try setting a width on the span too. (don't forget to give it 'display: inline-block;' too.

Ed: checkout <https://css-tricks.com/lodge/svg/>