"Product Page Design With Hover Effect And Embed Youtube Video"
Bootstrap 3.0.0 Snippet by Divscodebd

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title>Product Page Desig</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class=container> <div class="container"> <div class="row mar-bot-30"> <div class="col-md-12"> <div class="product-sec-tittle"> <h2 class="section-heading"><span>Feature</span> Product</h2> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="product-box "> <iframe src="https://www.youtube.com/embed/mc3aTxClUAk" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-md-3"> <div class="product-box "> <iframe src="https://www.youtube.com/embed/VGt1idetHzM" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-md-3"> <div class="product-box "> <iframe src="https://www.youtube.com/embed/_kvp5phEGLE" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-md-3"> <div class="product-box "> <iframe src="https://www.youtube.com/embed/R0g_9g9vb2A" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div class="row"> <div class="featured-product"> <div class="col-md-3"> <div class="product-box hover-circle text-center"> <div class="product-item"> <figure><img src="http://divscode.com/tf/martshop/assets/img/products/product-1.png" alt="product"></figure> <h3 class="product-title">Woman Stylish Fashion</h3> <h4 class="product-price">Pricce : $200</h4> <p class="product-drisc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <a href="#" class="btn btn-default buy-now">Add To cart</a> </div> <div class="hoverly-item"> <a href="" data-toggle="tooltip" data-placement="top" title="Wish List!"><i class="fa fa-heart"></i></a> <a href="" data-toggle="tooltip" data-placement="top" title="Add Cart!"><i class="fa fa-cart-arrow-down"></i></a> <a href="" data-toggle="modal" data-target="#quick_view" data-toggle="tooltip" data-placement="top" title="Quick View!"><i class="fa fa-eye"></i></a> <br> <a href="" class="btn btn-default view-details-btn">View Details</a> </div> <div class="product-cap cap-bg-black"> 20% </div> </div> </div> <div class="col-md-3"> <div class="product-box hover-circle text-center"> <div class="product-item"> <figure><img src="http://divscode.com/tf/martshop/assets/img/products/product-2.png" alt="product"></figure> <h3 class="product-title">Woman Stylish Fashion</h3> <h4 class="product-price">Pricce : $200</h4> <p class="product-drisc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <a href="#" class="btn btn-default buy-now">Add To cart</a> </div> <div class="hoverly-item"> <a href="" data-toggle="tooltip" data-placement="top" title="Wish List!"><i class="fa fa-heart"></i></a> <a href="" data-toggle="tooltip" data-placement="top" title="Add Cart!"><i class="fa fa-cart-arrow-down"></i></a> <a href="" data-toggle="modal" data-target="#quick_view" data-toggle="tooltip" data-placement="top" title="Quick View!"><i class="fa fa-eye"></i></a> <br> <a href="" class="btn btn-default view-details-btn">View Details</a> </div> <div class="product-cap cap-bg-black"> 20% </div> </div> </div> <div class="col-md-3"> <div class="product-box hover-circle text-center"> <div class="product-item"> <figure><img src="http://divscode.com/tf/martshop/assets/img/products/product-3.png" alt="product"></figure> <h3 class="product-title">Woman Stylish Fashion</h3> <h4 class="product-price">Pricce : $200</h4> <p class="product-drisc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <a href="#" class="btn btn-default buy-now">Add To cart</a> </div> <div class="hoverly-item"> <a href="" data-toggle="tooltip" data-placement="top" title="Wish List!"><i class="fa fa-heart"></i></a> <a href="" data-toggle="tooltip" data-placement="top" title="Add Cart!"><i class="fa fa-cart-arrow-down"></i></a> <a href="" data-toggle="modal" data-target="#quick_view" data-toggle="tooltip" data-placement="top" title="Quick View!"><i class="fa fa-eye"></i></a> <br> <a href="" class="btn btn-default view-details-btn">View Details</a> </div> <div class="product-cap cap-bg-black"> 20% </div> </div> </div> <div class="col-md-3"> <div class="product-box hover-circle text-center"> <div class="product-item"> <figure><img src="http://divscode.com/tf/martshop/assets/img/products/product-4.png" alt="product"></figure> <h3 class="product-title">Woman Stylish Fashion</h3> <h4 class="product-price">Pricce : $200</h4> <p class="product-drisc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <a href="#" class="btn btn-default buy-now">Add To cart</a> </div> <div class="hoverly-item"> <a href="" data-toggle="tooltip" data-placement="top" title="Wish List!"><i class="fa fa-heart"></i></a> <a href="" data-toggle="tooltip" data-placement="top" title="Add Cart!"><i class="fa fa-cart-arrow-down"></i></a> <a href="" data-toggle="modal" data-target="#quick_view" data-toggle="tooltip" data-placement="top" title="Quick View!"><i class="fa fa-eye"></i></a> <br> <a href="" class="btn btn-default view-details-btn">View Details</a> </div> <div class="product-cap cap-bg-black"> 20% </div> </div> </div> <div class="col-md-3"> <div class="product-box hover-circle text-center"> <div class="product-item"> <figure><img src="http://divscode.com/tf/martshop/assets/img/products/product-5.png" alt="product"></figure> <h3 class="product-title">Woman Stylish Fashion</h3> <h4 class="product-price">Pricce : $200</h4> <p class="product-drisc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <a href="#" class="btn btn-default buy-now">Add To cart</a> </div> <div class="hoverly-item"> <a href="" data-toggle="tooltip" data-placement="top" title="Wish List!"><i class="fa fa-heart"></i></a> <a href="" data-toggle="tooltip" data-placement="top" title="Add Cart!"><i class="fa fa-cart-arrow-down"></i></a> <a href="" data-toggle="modal" data-target="#quick_view" data-toggle="tooltip" data-placement="top" title="Quick View!"><i class="fa fa-eye"></i></a> <br> <a href="" class="btn btn-default view-details-btn">View Details</a> </div> <div class="product-cap cap-bg-black"> 20% </div> </div> </div> <div class="col-md-3"> <div class="product-box hover-circle text-center"> <div class="product-item"> <figure><img src="http://divscode.com/tf/martshop/assets/img/products/product-6.png" alt="product"></figure> <h3 class="product-title">Woman Stylish Fashion</h3> <h4 class="product-price">Pricce : $200</h4> <p class="product-drisc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <a href="#" class="btn btn-default buy-now">Add To cart</a> </div> <div class="hoverly-item"> <a href="" data-toggle="tooltip" data-placement="top" title="Wish List!"><i class="fa fa-heart"></i></a> <a href="" data-toggle="tooltip" data-placement="top" title="Add Cart!"><i class="fa fa-cart-arrow-down"></i></a> <a href="" data-toggle="modal" data-target="#quick_view" data-toggle="tooltip" data-placement="top" title="Quick View!"><i class="fa fa-eye"></i></a> <br> <a href="" class="btn btn-default view-details-btn">View Details</a> </div> <div class="product-cap cap-bg-black"> 20% </div> </div> </div> <div class="col-md-3"> <div class="product-box hover-circle text-center"> <div class="product-item"> <figure><img src="http://divscode.com/tf/martshop/assets/img/products/product-7.png" alt="product"></figure> <h3 class="product-title">Woman Stylish Fashion</h3> <h4 class="product-price">Pricce : $200</h4> <p class="product-drisc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <a href="#" class="btn btn-default buy-now">Add To cart</a> </div> <div class="hoverly-item"> <a href="" data-toggle="tooltip" data-placement="top" title="Wish List!"><i class="fa fa-heart"></i></a> <a href="" data-toggle="tooltip" data-placement="top" title="Add Cart!"><i class="fa fa-cart-arrow-down"></i></a> <a href="" data-toggle="modal" data-target="#quick_view" data-toggle="tooltip" data-placement="top" title="Quick View!"><i class="fa fa-eye"></i></a> <br> <a href="" class="btn btn-default view-details-btn">View Details</a> </div> <div class="product-cap cap-bg-black"> 20% </div> </div> </div> <div class="col-md-3"> <div class="product-box hover-circle text-center"> <div class="product-item"> <figure><img src="http://divscode.com/tf/martshop/assets/img/products/product-8.png" alt="product"></figure> <h3 class="product-title">Woman Stylish Fashion</h3> <h4 class="product-price">Pricce : $200</h4> <p class="product-drisc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <a href="#" class="btn btn-default buy-now">Add To cart</a> </div> <div class="hoverly-item"> <a href="" data-toggle="tooltip" data-placement="top" title="Wish List!"><i class="fa fa-heart"></i></a> <a href="" data-toggle="tooltip" data-placement="top" title="Add Cart!"><i class="fa fa-cart-arrow-down"></i></a> <a href="" data-toggle="modal" data-target="#quick_view" data-toggle="tooltip" data-placement="top" title="Quick View!"><i class="fa fa-eye"></i></a> <br> <a href="" class="btn btn-default view-details-btn">View Details</a> </div> <div class="product-cap cap-bg-black"> 20% </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="product-box "> <iframe src="https://www.youtube.com/embed/mc3aTxClUAk" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-md-3"> <div class="product-box "> <iframe src="https://www.youtube.com/embed/VGt1idetHzM" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-md-3"> <div class="product-box "> <iframe src="https://www.youtube.com/embed/_kvp5phEGLE" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-md-3"> <div class="product-box "> <iframe src="https://www.youtube.com/embed/R0g_9g9vb2A" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </body> </html>
.section-tittle h2 { text-transform: uppercase; color: #333745; font-weight: 600; } .section-tittle h2 span { color: #ff3546; } .section-heading { position: relative; } .section-heading::after { content: ""; position: absolute; width: 40%; height: 2px; bottom: -10px; left: 30%; background: #ddd; transform: translate(0%); } .product-box { position: relative; box-shadow: 0px 2px 10px -4px #333745; cursor: pointer; padding: 10px 10px; margin-bottom: 20px; margin-top: 15px; } .cap-bg-black { background: #333745; } .cap-bg-red { background: red; } .cap-bg-theme { background: #ff3546; } .product-cap { position: absolute; height: 50px; width: 50px; color: #fff; top: 0; text-align: center; font-weight: 600; line-height: 50px; font-size: 12px; border-radius: 100%; } .product-title { font-size: 17px; text-transform: uppercase; font-weight: 600; color: #f82e56; line-height: 45px; transition: all .4s ease-in; } .product-title:hover { color: #333745; transition: all .4s ease-in; } .product-price { font-size: 17px; font-weight: 600; line-height: 15px; color: #333745; } .product-drisc { line-height: 18px; margin-top: 10px; } .hoverly-item { border-radius: 10px; -webkit-animation: circle .50s; animation: circle .50s; position: absolute; top: 7%; opacity: 0; background-color: rgba(0, 100, 100, 0.5); width: 85%; height: 77%; left: 8%; transition: all .4s ease-in; } .product-box:hover .hoverly-item { opacity: 1; transition: all .4s ease-in; } .hoverly-item a { line-height: 200px; } .hoverly-item a i { font-size: 20px; background: #f82e56; color: #fff; height: 40px; width: 40px; line-height: 35px; border: 3px solid transparent; transition: all .4s ease-in; } .hoverly-item a i:hover { border: 3px solid #f82e56; background: #fff; color: #f82e56; transition: all .4s ease-in; } .view-details-btn { text-transform: uppercase; line-height: 20px !important; margin-top: -50%; padding: 8px 25px; background: #f82e56; color: #fff; border-color: transparent; border-radius: 0px; } .view-details-btn:hover { color: #f82e56!important; border: 1px solid #f82e56!important; background: #fff!important; -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out; transition: background 0.5s ease-in-out, color 0.5s ease-in-out; } .buy-now { margin-top: 10px; margin-bottom: 15px; color: #f82e56; border-radius: 0px; padding: 8px 25px; border: 1px solid #f82e56; background: none; white-space: nowrap; letter-spacing: 0px; display: inline-block; text-transform: capitalize; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; transition: background 0.3s ease-in-out, color 0.3s ease-in-out; } .buy-now:hover { color: #ffffff!important; border: 1px solid #ffffff!important; background: #f82e56!important; -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out; transition: background 0.5s ease-in-out, color 0.5s ease-in-out; } .product-box iframe{ width:100%; height:180px; }

Related: See More

Paper Kit 2
Hover Effect Style
Different types of hover and transition effect.
Team Design Section with Pure CSS Effect

Questions / Comments: