<link rel="stylesheet" href="https://foxtheme.net/wp-content/themes/fox/fox/main/css/all.css">
<style>
    .custom-div {
      background-color: #ffffff;
      color: #000000; 
      padding: 20px;
      height:400px;
      width:300px;
      background:#ccc;
      transition: background-color 0.3s, color 0.3s;
      border-radius:10px;
      position: relative;
      text-align: center;
      font-family: arial;
    }
    .custom-div span{
      position: absolute;
      left:0;
      top:0;
      background:#333;
      color:#fff444;
      padding:10px;
      border-radius: 7px 0px 7px 0px;
    }
    .custom-div img{
      width:130px;
      height:130px;
      border-radius:100%;
      padding:4px;
      border: 2px dashed;
    }
    .custom-div hr{
      border:1px solid #fff444;
      width:70px;
      margin-top:20px;
    }
    .custom-div:hover {
      background-color: #222; 
      color: #ffffff;
    }
    .custom-div:hover span{
      background:#fff444;
      color:#333;
    }
    .custom-div .tit{
      margin-bottom:10px;
      margin-top:30px;
    }
    .custom-div a {
      display:block;
      text-decoration: none;
      color:#333;
      font-size:16px;
      font-weight:bold;
    }
    .custom-div:hover a {
      color: #ffffff;
    }
    .custom-div .xem {
      position: absolute;
      bottom: 20px;
      text-align: center;
      width: 100%;
      left: 0;
      right: 0;
  	}
    .custom-div .xem i{
      padding:5px;
      background:#333;
      color:#fff444;
      border-radius:100%;
      width:15px;
      height:15px;
      height:15px;
      margin-left:10px;
    }
    .custom-div:hover .xem i{
      background:#fff444;
      color:#333;
    }
    .custom-div:hover .xem {
      color:#fff444;
    }
  </style>
<div class="custom-div">
  <span><i class="fa-solid fa-star"></i></span>
  <img src="https://caodem.com/wp-content/uploads/caodem-hinh-anh-dua-trinh-soan-thao-classic-363x188.png">
  <hr>
  <a class="tit" href="#">Tôi là Hoan chuyên gia chia sẻ tào lao</a>
  Cảm ơn bạn đã xem demo này, tuy demo không được ra gì và này nọ cho lắm
  <a class="xem">Xem chi tiết <i class="fa-solid fa-arrow-right"></i></a>
</div>

<link rel="stylesheet" href="https://foxtheme.net/wp-content/themes/fox/fox/main/css/all.css">
<style>
    .custom-div {
      background-color: #ffffff;
      color: #000000; 
      padding: 20px;
      height:400px;
      width:300px;
      background:#ccc;
      transition: background-color 0.3s, color 0.3s;
      border-radius:10px;
      position: relative;
      text-align: center;
      font-family: arial;
    }
    .custom-div span{
      position: absolute;
      left:0;
      top:0;
      background:#333;
      color:#fff444;
      padding:10px;
      border-radius: 7px 0px 7px 0px;
    }
    .custom-div img{
      width:130px;
      height:130px;
      border-radius:100%;
      padding:4px;
      border: 2px dashed;
    }
    .custom-div hr{
      border:1px solid #fff444;
      width:70px;
      margin-top:20px;
    }
    .custom-div:hover {
      background-color: #222; 
      color: #ffffff;
    }
    .custom-div:hover span{
      background:#fff444;
      color:#333;
    }
    .custom-div .tit{
      margin-bottom:10px;
      margin-top:30px;
    }
    .custom-div a {
      display:block;
      text-decoration: none;
      color:#333;
      font-size:16px;
      font-weight:bold;
    }
    .custom-div:hover a {
      color: #ffffff;
    }
    .custom-div .xem {
      position: absolute;
      bottom: 20px;
      text-align: center;
      width: 100%;
      left: 0;
      right: 0;
  	}
    .custom-div .xem i{
      padding:5px;
      background:#333;
      color:#fff444;
      border-radius:100%;
      width:15px;
      height:15px;
      height:15px;
      margin-left:10px;
    }
    .custom-div:hover .xem i{
      background:#fff444;
      color:#333;
    }
    .custom-div:hover .xem {
      color:#fff444;
    }
  </style>
<div class="custom-div">
  <span><i class="fa-solid fa-star"></i></span>
  <img src="https://caodem.com/wp-content/uploads/caodem-hinh-anh-dua-trinh-soan-thao-classic-363x188.png">
  <hr>
  <a class="tit" href="#">Tôi là Hoan chuyên gia chia sẻ tào lao</a>
  Cảm ơn bạn đã xem demo này, tuy demo không được ra gì và này nọ cho lắm
  <a class="xem">Xem chi tiết <i class="fa-solid fa-arrow-right"></i></a>
</div>

Mã nhúng & chia sẻ

Hiệu ứng Hover cho Card đơn giản mà tinh tế