Best way to use a:hover to switch images in HTML?

Question

I'm trying to build a left-panel for the navigation of a website; and running into a little bit of a problem. I originally was using CSS to create the buttons on the panel (Welcome, Services, Portfolio, FAQ and Contact) but below it I also wanted some Affiliation links, those were images with the logo's of the affiliations.

Here is an image for you.

http://prntscr.com/atci5k

When I was using CSS to create the buttons, I was able to use a:hover to change the background color, but I couldn't get the text centered vertically within the background, and I couldn't get it to stop clipping on re-size.

So I tried creating images to replace it, but now I'd like the a:hover to replace the welcome.png w/ welcome2.png so it will make the background darker on hover.

Here's the code:

  <div class="leftpanelPics">  
        <a id="change" href="#" > <img src="images/nav/welcome.png"> </a>
        <a id="change" href="services.html"><img src="images/nav/services.png"></a>
        <a id="change" href="portfolio.html"><img src="images/nav/portfolio.png"></a>
        <a id="change" href="faq.html"><img src="images/nav/faq.png"></a>
        <a id="change" href="contact.html"><img src="images/nav/contact.png"></a>
  </div>

<p class="text text-1"><span>Affiliations:</span></p>

 <div class="leftpanelPics">
        <a href="https://www.findmyorganizer.com/"><img src="images/logos/FMO_Logo.png"></a>
        <a href="http://www.iocp.org/"><img src="images/logos/IOCP_Logo.png"></a>    
        <a href="https://www.stjude.org/"> <img src="images/logos/St_Jude_Logo.png"></a>     
</div>


 <p class="text text-1"><span>Social Media:</span></p>
<div class="socialmedia">
            <a href="https://www.twitter.com/"> <img src="images/socialmedia/twitterlogo.png"></a>
            <a href="https://www.facebook.com/"> <img src="images/socialmedia/facebooklogo.png"></a>
            <a href="https://www.instagram.com/"> <img src="images/socialmedia/instagramlogo.png"></a>                
            <a href="https://www.pinterest.com/"> <img src="images/socialmedia/pinterestlogo.png"></a>
            <a href="https://www.linkedin.com/"> <img src="images/socialmedia/linkedinlogo.png"></a>
</div>

`

Any help would be greatly appreciated.

Thanks

Edit

CSS:

.leftpanel {
  position: relative;
  float: left;
  clear: both;
  z-index: 10;
  width: 20.4%;
  height: 1199px;
  margin-left: 10%;
  vertical-align: middle;


}

.leftpanel .text {
  min-height: 14px;
  margin-left: 6.5%;
}


.body a.leftpanelPics:hover {
    color: darkcyan;
    width: 150%;
}

.leftpanelPics {
  float: left;
  clear: both;
  width: 68%;
  height: auto;
   margin: 7px 0 0 13%;


 }
.leftpanelPics img{
    width: 100%;
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
     border: 1px #0d1e6e solid;
    box-shadow: 0px -1px 20px rgba(0,0,0,.9);
}




.leftpanel {
  position: relative;
  float: left;
  clear: both;
  z-index: 10;
  width: 20.4%;
  height: 1199px;
  margin-left: 10%;
  vertical-align: middle;


}

.leftpanel .text {
  min-height: 14px;
  margin-left: 6.5%;
}


.body a.leftpanelPics:hover {
    color: darkcyan;
    width: 150%;
}

.leftpanelPics {
  float: left;
  clear: both;
  width: 68%;
  height: auto;
  margin: 7px 0 0 13%;


}
.leftpanelPics img{
    width: 100%;
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px #0d1e6e solid;
    box-shadow: 0px -1px 20px rgba(0,0,0,.9);
}

Answer 1

To create the rollover of the img on a:hover, you can do like this :

a:hover img {
  content:url("http://lorempicsum.com/futurama/255/200/2");
}

See working fiddle

But it's not fully compatible on every browsers (last edit a year ago). See this answer on SO :

https://stackoverflow.com/a/11484688/6028607

An other way to do it, a more compatible one, is to use pseudo element on the link hover like this

a { position: relative; display: inline-block; }
a:hover:before {
  content:""; 
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background:url("http://lorempicsum.com/futurama/255/200/2") no-repeat #fff;
}

See a working fiddle of this solution

Answer 2

You may want to create a class for the link itself. For example

<a class="welcome" href="#" ></a>

CSS:

.welcome {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('images/nav/welcome.png') center top no-repeat;
}

.welcome:hover {
   background-image: url('images/nav/welcome2.png');
}