..." /> Tạo chức năng Slide Porfolio chỉ với CSS3 - Phần mềm-Ứng dụng - Khoa Công nghệ thông tin - Đại học Duy Tân
17/03/2017 11:02:32 PM

Phần mềm-Ứng dụng

Tạo chức năng Slide Porfolio chỉ với CSS3

HTML

<div class="row">
  
  <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-lg-offset-1 col-md-offset-1">
  
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <center>
    <div class="displayWrapper">
      <div class="displayBox">
        <img src="1.jpg" alt="image1"/>
      </div>
    </div>
      <h4>Boosted Board</h4>
    </center>
  </div>
 </div>
</div>
 
CSS
@import url('https://fonts.googleapis.com/css?family=Raleway');
html , body {
  height:100%;
  width:100%;
  background:#f1f1f1;
  font-family: 'Raleway', sans-serif;
  overflow-x:hidden;
}
.titleBlock {
  width:70%;
  margin-left:15%;
}
.Sitetitle:before {
  content:"";
  width:50px;
  height:2px;
  background:#000;
  position: absolute;
  margin-top:18px;
  margin-left:-60px;
}
.Sitetitle:after {
  content:"";
  width:50px;
  height:2px;
  background:#000;
  position: absolute;
  margin-top:18px;
  margin-left:8px;
}
.displayWrapper {
  box-shadow: 0 0 15px rgba(0,0,0,0.6);
  padding: 10px;
  width:320px;
  margin-top:20px;
}
.displayBox {
  width:300px;
  height:300px;
  overflow: hidden;  
}
.displayBox img {
  width:100%;
  -webkit-transition: all 5s ease;
    transition: all 5s ease;
  position:relative;
}
.displayBox img:hover {
  cursor:pointer;
   transform: translateY(-83.7%);
}

» Tin mới nhất:

» Các tin khác:

Hôm nay, ngày

25/12/2024

Tuần học:

21

Sinh viên tiêu biểu

Số lượt truy cập: 9226063