I'm having some problems with the hover effect on my site... What I want to do is give my images, which I placed in a table, an effect when you move your mouse over it.
The effect works just fine when I apply the effect to all images, but this way the header and the menu-buttons also get the effect, and that's not what I want.
So I tried applying the effect to the table only by using div id, but that way ALL the images in the table change at once when you move over just one. (Seen in the code I posted)
Next thing I tried was putting the div id on the images separately, but then the effect stopped working at all...
Does anyone have any ideas? Thanks in advance! I'm quite new at coding so I apologise in advance in case it turns out to be something extremely simple :)
EDIT: My code. Sorry if it's a total mess!
#hoverflower:hover{opacity:0.5;filter:alpha(opacity=100)}
#left {
float: left;
margin-top: 42.3%;
width: 27%;
background: #212121;
text-align: left;
}
#right { float:right; display:; margin:0; padding:0; width:27%; background:#212121; }
body {
background-color: #212121;
}
body,td,th {
color: #CCC;
text-align: center;
</style>
</head>
<body>
<div id="left">
<p><img src="images/BIObutton.png" width="71" height="34" mar/>
</p>
<p><img src="images/CONTACTbutton.png" width="190" height="34" /></A></p></div>
<div id="box">
<p align="left"><img src="images/TITLE.png" width="46%" height="auto"/></p></img>
<div id="hoverflower">
<table width="46%" border="0" align="left">
<tr>
<div id=herp><td width="15%"><a href="flower1.html"><img src="flowers/1.jpg" width="100%" height="auto" /></a></td></div>
<td width="15%"><a href="flower2.html"><img src="flowers/2.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower3.html"><img src="flowers/3.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower4.html"><img src="flowers/4.jpg" width="100%" height="auto" /></a></td>
</tr>
<tr>
<td width="15%"><a href="flower5.html"><img src="flowers/5.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower6.html"><img src="flowers/6.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower7.html"><img src="flowers/7.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower8.html"><img src="flowers/8.jpg" width="100%" height="auto" /></a></td>
</tr>
<tr>
<td width="15%"><a href="flower9.html"><img src="flowers/9.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower10.html"><img src="flowers/10.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower11.html"><img src="flowers/11.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower12.html"><img src="flowers/12.jpg" width="100%" height="auto" /></a></td>
</tr>
<tr>
<td width="15%"><a href="flower13.html"><img src="flowers/13.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower14.html"><img src="flowers/14.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower15.html"><img src="flowers/15.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower16.html"><img src="flowers/16.jpg" width="100%" height="auto" /></a></td>
</tr>
</table>
</div>
<div id="right"> </div>
</body>
</html>