Tất cả bài viết | CSS3

Hướng dẫn tạo trang trình bày sản phẩm bằng Bootstrap với hiệu ứng CSS3

Trong bài thực hành này các Bạn sẽ được hướng dẫn tạo trang trình bày sản phẩm bằng Bootstrap với hiệu ứng CSS3

Bước 1: Dùng HTML chèn các sản phẩm

<h2 align="center">Hướng dẫn tạo trang trình bày sản phẩm bằng Bootstrap với hiệu ứng CSS3</h2>
<div class="container"> 
 <div class="row"> 
  <div class="col-sm-6 col-md-3"> 
   <div class="product"> 
    <p style="text-align:center;margin-top:20px;"> <img style="width: 100%" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product_display_3/images/140.jpg" class="img-responsive" alt="Sản phẩm 1"> 
    </p> 
    <div class="caption"> 
     <div class="blur"></div> 
     <div class="caption-text"> 
      <h3 style="border-top:2px solid white;border-bottom:2px solid white;padding:10px;">Sản phẩm 1</h3> 
      <p>hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể...</p> <a class=" btn btn-default" href="http://hocwebgiare.com/"><span class="glyphicon glyphicon-shopping-cart"> Mua</span></a> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="col-sm-6 col-md-3"> 
   <div class="product"> 
    <p style="text-align:center;margin-top:20px;"> <img style="width: 100%" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product_display_3/images/036.jpg" class="img-responsive" alt="Sản phẩm 2"> 
    </p> 
    <div class="caption"> 
     <div class="blur"></div> 
     <div class="caption-text"> 
      <h3 style="border-top:2px solid white;border-bottom:2px solid white;padding:10px;">Sản phẩm 2</h3> 
      <p>hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể...</p> <a class="btn btn-default" href="http://hocwebgiare.com/"><span class="glyphicon glyphicon-shopping-cart"> Mua</span></a> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="col-sm-6 col-md-3"> 
   <div class="product"> 
    <p style="text-align:center;margin-top:20px;"> <img style="width: 100%" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product_display_3/images/168.jpg" class="img-responsive" alt="Sản phẩm 3"> 
    </p> 
    <div class="caption"> 
     <div class="blur"></div> 
     <div class="caption-text"> 
      <h3 style="border-top:2px solid white;border-bottom:2px solid white;padding:10px;">Sản phẩm 3</h3> 
      <p>hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể...</p> <a class="btn btn-default" href="http://hocwebgiare.com/"><span class="glyphicon glyphicon-shopping-cart"> Mua</span></a> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="col-sm-6 col-md-3"> 
   <div class="product"> 
    <p style="text-align:center;margin-top:20px;"> <img style="width: 100%" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product_display_3/images/174.jpg" class="img-responsive" alt="Sản phẩm 4"> 
    </p> 
    <div class="caption"> 
     <div class="blur"></div> 
     <div class="caption-text"> 
      <h3 style="border-top:2px solid white;border-bottom:2px solid white;padding:10px;">Sản phẩm 4</h3> 
      <p>hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể...</p> <a class="btn btn-default" href="http://hocwebgiare.com/"><span class="glyphicon glyphicon-shopping-cart"> Mua</span></a> 
     </div> 
    </div> 
   </div> 
  </div> 
 </div>
</div>

Bước 2: Định nghĩa CSS cho sản phẩm

<style type="text/css">.product {  
padding: 0px;   
position: relative; 
overflow: hidden;   
height: 450px;  
border: 1px solid #EAEAEA;  
font-family: Arial, Helvetica, sans-serif;  
font-size: 12px;
}
 
.product:hover .caption {   
opacity: 1; 
transform: translateY(-150px);  
-webkit-transform:translateY(-150px);   
-moz-transform:translateY(-150px);  
-ms-transform:translateY(-150px);   
-o-transform:translateY(-150px);
}
 
.product img {  
z-index: 4;
}
 
.product .caption { 
position: absolute; 
top:400px;  
-webkit-transition:all 0.3s ease-in-out;    
-moz-transition:all 0.3s ease-in-out;   
-o-transition:all 0.3s ease-in-out; 
-ms-transition:all 0.3s ease-in-out;    
transition:all 0.3s ease-in-out;    
width: 100%;
}
 
.product .blur {    
background-color: rgba(0, 0, 0, 0.7);   
height: 300px;  
z-index: 5; 
position: absolute; 
width: 100%;
}
.product .caption-text {    
z-index: 10;    
color: #fff;    
position: absolute; 
height: 300px;  
text-align: center; 
top:-20px;  
width: 100%;
}</style>

Bước 3: Gọi thư viện Bootstrap

1	`<link` `rel="stylesheet"` `href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>`