My main goal is to implement a hover effect that covers an entire section, but I'm facing some challenges. When I hover over my products, it doesn't behave as expected and adds extra white space below while not covering the section properly.
Things I have tried:
- Adjusting the line height
- Adding a new section/div
- Setting padding and margin to 0
Here is a snippet of my CSS code:
div#cat{
/*line-height: 30%;
height: 50px;*/
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}
/*product area rollover/hover*/
div#cat:hover{
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
height: 80%;
}And here is a part of the PHP code where I loop information out of a database:
echo("<div id='cat$i' class='cat'>");
echo("<table>");
echo("<tr>");
echo("<td class='full'>");
echo("<a name='foodcat$iii' id='prods_nme'>$prod_name</a>");
echo("<td>");
echo("</td>");
echo("<p id='prods_desc'>$prod_desc</p>");
echo("</td>");
echo("<td class='price'>");
echo("<p id='prods_price'>£$prod_price</p>");
echo("</td>");
echo("<td class='add'>");
echo("<a href='Shopping_cart.php?add_item=$prod_id'>+</a>");
echo("</td>");
echo("</tr>");
echo("</table>");
echo("<br>");
echo("<br>");
echo("<hr id='hr'>");
echo("</div>");
echo("</div>");
echo("</div>");
echo("<br>");
echo("<br>");
$i++;