Best way to use a:hover to switch images in HTML? - 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">
<img src="images/logos/FMO_Logo.png">
<img src="images/logos/IOCP_Logo.png">
<img src="images/logos/St_Jude_Logo.png">
</div>
<p class="text text-1"><span>Social Media:</span></p>
<div class="socialmedia">
<img src="images/socialmedia/twitterlogo.png">
<img src="images/socialmedia/facebooklogo.png">
<img src="images/socialmedia/instagramlogo.png">
<img src="images/socialmedia/pinterestlogo.png">
<img src="images/socialmedia/linkedinlogo.png">
</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

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');
}

Answer 2

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