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

Thêm một hiệu ứng slide hình ảnh mà mình muốn chia sẻ cho các bạn trong bài viết này, với chỉ vài dòng CSS3, mà các bạn có thể tha hồ thêm ý tưởng vào trong các bản thiết kế web của mình.

Xem Demo | Download

HTML

Đầu tiên, các bạn làm slide theo khung chuẩn html như sau :

<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

Sau đó , định dạng với đoạn css sau:

@import url('https://fonts.googleapis.com/css?family=Raleway');

html , body
{
  height:100%;
  awidth:100%;
  background:#f1f1f1;
  font-family: 'Raleway', sans-serif;
  overflow-x:hidden;
}

.titleBlock
{
  awidth:70%;
  margin-left:15%;
}

.Sitetitle:before
{
  content:"";
  awidth:50px;
  height:2px;
  background:#000;
  position: absolute;
  margin-top:18px;
  margin-left:-60px;
}

.Sitetitle:after
{
  content:"";
  awidth: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;
  awidth:320px;
  margin-top:20px;
}
.displayBox
{
  awidth:300px;
  height:300px;
  overflow: hidden;   
}
.displayBox img
{
  awidth:100%;
  -webkit-transition: all 5s ease;
    transition: all 5s ease;
  position:relative;
}
.displayBox img:hover
{
  cursor:pointer;
   transform: translateY(-83.7%);
}

Để thay đổi tốc độ chạy ảnh, các bạn thay đổi thông số ở phần thuộc tính của transtion từ 5s sang giá trị mà các bạn muốn.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster