When setting up my homepage in Chrome, I decided to use an HTML page with icons for quick access to my most used websites. Wanting to make it more dynamic and visually appealing, I made some changes by rounding the corners of the icons and graying them out (while they turn full-color on hover). This part works fine.
However, I also wanted to implement an expanding effect upon hovering over the icons. Unfortunately, I encountered a problem where some images are layered under others. Here is the code snippet:
<head>
<title>Start</title>
<style type="text/css">
body {
background-image: url(Greylight.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: black;
}
table, th, td {
border: 0px solid black;
border-collapse: collapse;
}
th, td {
padding: 6px;
}
img {
border-radius: 25%;
}
p {
border-style:solid;
border-color:#808080 #800080;
}
div img {
transition: all 0.2s;
filter: grayscale(80%);
}
div img:hover {
filter: grayscale(0%);
transform: scale(2);
}
</style>
</head>
<td>
<a href="http://.."><div><img src="image.jpg" alt="test" width="80" height="80"></a></div>
</td>
<td>
<a href="http://.."><div><img src="image.jpg" alt="test" width="80" height="80"></a></div>
</td>
I have tried using the 'absolute' line within CSS to fix this issue but had no success. Does anyone know how to resolve it? Any help would be greatly appreciated!
Thank you!