How can I get my shadow around my entire div? - html

Question

For my site I want to show some products on my site and when you hover over these products, there should be more information. Currently the design for the product card is there. I have 2 questions that I cannot get to work.
I cannot get the shadow box around the whole div when I hover around it. Have tried to add a height to my div but that messed up the layout of my other divs. What am I doing wrong?
Also the border of my div goes through my button (at least the link I have styled as a button). How can I fix this?
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
position: absolute;
width: 225px;
position: absolute;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product!</p>
Vergelijk prijzen
</div>
</div>
</div>

Answer 1

A lot of your issues come from .product-info having position: absolute;. So remove that (both of them, you have position: absolute; in there twice); then you can add some padding-bottom to .product-grid to "fit" your button inside the div.
Check out what I did here:
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
padding-bottom: 15px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
width: 225px;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product</p>
Vergelijk prijzen
</div>
</div>
</div>

Answer 2

You can use shadow settings similar to 0px 0px 10px 4px (i.e. the first and second values are zero, so the shadow will be spread equally on all sides according to the third and fourth values):
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
position: absolute;
width: 225px;
position: absolute;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product!</p>
Vergelijk prijzen
</div>
</div>
</div>