Menu
So I have been working on a website with clickable images, but I can't seem to get the ...:hover right. I want that the picture gets overlayed by white color with 0.1 opacity.
<html>
<head>
<style>
body {padding: 0; margin: 0;}
img {
margin-top: -10px;
width: 100%;
height: auto;
}
a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
#asca:hover {background-color: rgba(255, 255, 255, 0.1);}
#fhca:hover {background-color: rgba(255, 255, 255, 0.1);}
#asca img:hover {background-color: rgba(255, 255, 255, 0.1);}
#fhca img:hover {background-color: rgba(255, 255, 255, 0.1);}
</style>
</head>
<body>
<a id="asca" href="asc.php">
<img src="Pictures/chevcorvette4kp.png" width="4096" height="900" alt="ascpic">
</a>
<a id="fhca" href="fhc.php">
<img src="Pictures/fhyper.png" width="4096" height="900" alt="fhcpic">
</a>
</body>
</html>
As you can see I really tried to change everything to that color upon hover, but it doesn't seem to work.
762
asked Apr 15 '26 17:04
It doesn't work because the image is covering its own background-color. There are a few ways to achieve the effect you're after, but the easiest and most straight-forward is to just use a background-color on the anchor tags, and change opacity on the image on hover.
<html>
<head>
<style>
body {padding: 0; margin: 0;}
img {
margin-top: -10px;
width: 100%;
height: auto;
}
#asca,
#fhca {
background-color: rgb(255,255,255);
}
#asca:hover img,
#fhca:hover img {
opacity: 0.9;
}
</style>
</head>
<body>
<a id="asca" href="asc.php">
<img src="Pictures/chevcorvette4kp.png" width="4096" height="900" alt="ascpic">
</a>
<a id="fhca" href="fhc.php">
<img src="Pictures/fhyper.png" width="4096" height="900" alt="fhcpic">
</a>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
