Connor Connor - 7 months ago 36
HTML Question

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

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

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