Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Hiệu Ứng Hover Cho Profile Card Bằng HTML CSS

Tạo Hiệu Ứng Hover Cho Profile Card Bằng HTML CSS


Ngày 14 Tháng 9 Năm 2020

Tạo Hiệu Ứng Hover Cho Profile Card Bằng HTML CSS

Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách tạo hiệu ứng hover cho profile card bằng HTML và CSS nhé!

Tạo Cấu Trúc Phần Tử HTML

Trước tiên chúng ta sẽ cần tạo hai file chính là index.html (Lưu trữ phần tử HTML) và style.css (Lưu trữ các thuộc tính CSS). .Sau đó liên kết chúng lại với nhau thông qua đoạn mã bên dưới:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Hiệu Ứng Hover Profile Card</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Ở trên thì mình có sử dụng thêm Font Awesome phiên bản 4.7 và Google Font nữa nha.

Thêm Phần Tử HTML Cho Profile Card

Bước tiếp theo chúng ta sẽ đi vào xây dựng những phần tử HTML cần thiết để tạo ra hiệu ứng hover profile card thông qua đoạn mã sau đây nhé:

HTML

<div class="container">
  <div class="tieu_de">
    <img src="https://images.pexels.com/photos/3756682/pexels-photo-3756682.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=300"       alt="">
    <div class="noi_dung">
      <h2>Tên Thành Viên</h2>
      <h3 class="chuyen_dong_text">
        Vị Trí Thành Viên
      </h3>
      <p class="chuyen_dong_text">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt ea omnis, molestias magni cum consectetur exercitationem repudiandae commodi accusantium magnam iste doloribus dolore. Quasi veniam expedita nobis, itaque consequuntur soluta.
      </p>
      <div class="icon">
        <ul>
          <li clas="facebook">
            <a href="">
              <i class="fa fa-facebook-square" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="">
              <i class="fa fa-twitter-square" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="">
              <i class="fa fa-instagram" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

Và kết quả của đoạn mã trên bạn xem phía bên dưới nhé:

Hiệu Ứng Hover Profile Card 1

Căn Chỉnh Và Thiết Lập Style Cho Phần Tử HTML

Trong phần này chúng ta sẽ sử dụng các thuộc tính CSS để thiết lập vị trí của phần tử HTML và thêm font, màu nền cho trang thông qua đoạn mã dưới đây nhé:

CSS

body{
    font-family: 'Open Sans', sans-serif;
    background: #7f5a83;
    background-image: linear-gradient(315deg, white 0%, #0d324d 74%);
    height: 100vh;
}
.container{
    margin: 150px auto 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    max-width: 1200px;
}
.tieu_de{
    width: 400px;
    height: 400px;
    margin: 10px;
    background-color: #99aeff;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease-out;
    box-shadow: 0px 35px 77px -17px rgb(0, 0, 0, 0.4);
    overflow: hidden;
    color: white;
}

Và kết quả đoạn mã CSS bạn xem ở dưới đây nhé:

Hiệu Ứng Hover Profile Card 2

Căn Chỉnh Và Thiết Lập Style Cho Phần Tử Con Trong Profile Card

Phần này chúng ta sẽ đi vào thiết lập style CSS cho các phần tử con trong profile card thông qua đoạn mã sau đây nhé:

CSS

.tieu_de img{
    position: absolute;
    top:0;
    left: 0;
    z-index: 0;
    transition: all 0.4s ease-out;
}
.tieu_de .noi_dung {
    position: absolute;
    padding: 30px;
    height: calc(100% -60px);
}
.tieu_de h2{
    font-weight: bold;
    margin:0;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tieu_de h3 {
    margin: 20px 0 0 0;
    transform: translateX(50px);
}
.tieu_de p {
    margin: 20px 0 0 0;
    line-height: 25px;
    transform: translateX(-50px);
    transition-delay: 0.2s;
}

Và kết quả bạn xem ở bên dưới nhé:

Hiệu Ứng Hover Profile Card 3

Tạo Hiệu Ứng Hover Cho Profile Card

Phần này chúng ta sẽ đi vào tạo hiệu ứng cho profile card thông qua đoạn mã sau đây nhé:

CSS

.chuyen_dong_text{
    opacity: 0;
    transition: all 0.6s ease-in-out;
}
.tieu_de:hover{
    box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
    transform: scale(1.2);
    z-index: 10;
}
.tieu_de:hover img{
    filter: blur(40px);
}
.tieu_de:hover .chuyen_dong_text{
    transform:  translateX(0);
    opacity: 1;
}

Kết quả bạn xem ở dưới đây nhé:

Thiết Lập Style CSS Cho Icon

Bước cuối cùng chúng ta sẽ đi vào thiết kế lại icon mạng xã hội cũng như thêm hiệu ứng chuyển động cho nó thông qua đoạn mã sau đây nhé:

CSS

.icon ul{
    list-style-type: none;
    }
.icon ul li{
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    border: 5px solid white;
    float: left;
    transition: all 0.5s ease;
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.5s ease;
    transform: translateY(100px) ;
}
.icon ul li a{
    color: white;
}
.tieu_de:hover .icon ul li{
    opacity: 1;
    transform: translateY(0px);
}

Và kết quả cuối cùng bạn xem video bên dưới nhé:

Nếu bạn muốn xem trên Codepen thì có thể tham khảo ở đây nhé!

Ngoài ra mình cũng có sưu tầm những thiết kế đẹp cho profile card, bạn có thể xem ở đây nha!

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn về kiến thức tạo hiệu ứng hover profile card hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!