<h3 class="heading">Bootstrap Product Grid</h3>
<div class="container">
<div class="row product">
<div class="col-md-4 ">
<div class="card">
<div class="ccc">
<p class="text-center"><img src="https://raw.githubusercontent.com/rxhack/productImage/main/1.jpg" class="imw"></p>
<!-- <div class="overlay">
<div class="text">View Details</div>
</div> -->
</div>
<div class="card-body">
<h5 class="text-center">Apple Watch Series 3</h5>
<p class="text-center">Price: $550.00</p>
<p class="text-center"><input type="submit" name="Save" value="Buy" class=" cc1"></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="ccc">
<p class="text-center"><img src="https://raw.githubusercontent.com/rxhack/productImage/main/2.jpg" class="imw"></p>
<!-- <div class="overlay">
<div class="text">View Details</div>
</div> -->
</div>
<div class="card-body">
<h5 class="text-center">Beat Solo3 Wearless</h5>
<p class="text-center">Price: $159.99</p>
<p class="text-center"><input type="submit" name="Save" value="Buy" class=" cc1"></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="ccc">
<p class="text-center"><img src="https://raw.githubusercontent.com/rxhack/productImage/main/3.jpg" class="imw"></p>
<!-- <div class="overlay">
<div class="text">View Details</div>
</div> -->
</div>
<div class="card-body">
<h5 class="text-center">Apple MacBook</h5>
<p class="text-center">Price: $2249.00</p>
<p class="text-center"><input type="submit" name="Save" value="Buy" class=" cc1"></p>
</div>
</div>
</div>
</div>
<div class="row product">
<div class="col-md-4 ">
<div class="card">
<div class="ccc">
<p class="text-center"><img src="https://raw.githubusercontent.com/rxhack/productImage/main/4.jpg" class="imw"></p>
<!-- <div class="overlay">
<div class="text">View Details</div>
</div> -->
</div>
<div class="card-body">
<h5 class="text-center">Apple imac</h5>
<p class="text-center">Price: $1699.99</p>
<p class="text-center"><input type="submit" name="Save" value="Buy" class=" cc1"></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="ccc">
<p class="text-center"><img src="https://raw.githubusercontent.com/rxhack/productImage/main/6.jpg" class="imw"></p>
<!-- <div class="overlay">
<div class="text">View Details</div>
</div> -->
</div>
<div class="card-body">
<h5 class="text-center">Apple ipad Air</h5>
<p class="text-center">Price: $415.99</p>
<p class="text-center"><input type="submit" name="Save" value="Buy" class=" cc1"></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="ccc">
<p class="text-center"><img src="https://raw.githubusercontent.com/rxhack/productImage/main/7.jpg" class="imw"></p>
<!-- <div class="overlay">
<div class="text">View Details</div>
</div> -->
</div>
<div class="card-body">
<h5 class="text-center">Apple iphone X</h5>
<p class="text-center">Price: $1342.00</p>
<p class="text-center"><input type="submit" name="Save" value="Buy" class=" cc1"></p>
</div>
</div>
</div>
</div>
</div>
.heading{
text-align: center;
margin-top: 20px;
text-decoration: underline;
}
.imw{
width: 65%;
position: relative;
}
.product{
margin-top: 30px;
margin-bottom: 30px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 9;
bottom: 0;
left: 0;
right: 0;
height: 60%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #000;
}
.ccc:hover .overlay {
opacity: 0.7;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.cc1{
width: 82%;
background: #fff;
color: #000;
padding: 4px 8px;
border: 1px solid #000;
height: 40px;
border-radius: 7px;
}
@media only screen and (max-width: 553px) {
.card{
margin-top: 25px;
}
}
.card{
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
}
