Membuat card hover menggunakan HTML CSS

Masih dalam tahap belajar front end web developer, disini saya membuat card hover menggunakan HTML dan CSS supaya web lebih menarik dan juga interaktif. Hasilnya seperti gambar ini:

Berikut ini kode HTML dan CSS yang digunakan:

Kode HTML

<div class="card">
   <ul class="ul">
       <li>
		   <span class="material-icons-two-tone">local_cafe</span>
	   </li>
	   <li>
		   <span class="material-icons-two-tone">theaters</span>
	   </li>
	   <li>
		   <span class="material-icons-two-tone">store</span>
	   </li>
	   <li>
		   <span class="material-icons-two-tone">location_on</span>
	   </li>
   </ul>
   <img src="card-hover.jpg" alt="card-hover">
   <div class="con-text">
	   <h2>Bandung</h2>
	   <p>
		   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis aperiam optio natus exercitationem. Fuga facilis blanditiis eaque illum quia, a natus sed cupiditate culpa nulla deleniti officiis vitae at voluptatem.
		   <button>
			   See more
		   </button>
	   </p>
   </div>
</div>

Kode CSS

.card {
    width: 300px;
    height: 400px;
    background: #000;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .25s ease;
    backface-visibility: hidden;
}
.card:hover {
    transform: scale(.9);
}
.card:hover::after {
    height: 280px;
}
.card:hover .con-text p {
    margin-bottom: 0px;
    opacity: 1;
}
.card:hover img {
    transform: scale(1.25);
}
.card:hover .ul {
    transform: translate(0);
    opacity: 1;
}
.card::after {
    width: 100%;
    content: '';
    left: 0px;
    bottom: 0px;
    height: 150px;
    position: absolute;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1)100%);
    z-index: 20;
    transition: all .25s ease;
}
.card .con-text {
    z-index: 30;
    position: absolute;
    bottom: 0px;
    color: #fff;
    padding: 20px;
    padding-bottom: 30px;
}
.card .con-text p {
    font-size: .8rem;
    opacity: 0;
    margin-bottom: -170px;
    transition: all .25s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
}
.card .con-text p button {
    padding: 7px 17px;
    border-radius: 12px;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    margin-top: 10px;
    margin-left: auto;
    cursor: pointer;
    transition: all .25s ease;
    font-family: poppins;
    font-size: .75rem;
    outline: none;
}
.card .con-text p button:hover {
    background: #fff;
    color: #000;
}
.ul {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 40;
    border-radius: 14px;
    padding-left: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    top: 0px;
    opacity: 0;
    transform: translate(100%);
    transition: all .25s ease;
}
.ul li {
    background: #fff;
    list-style: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .7;
    transition: all .25s ease;
    backface-visibility: hidden;
}
.ul li:last-child {
    border-radius: 0px 0px 12px 12px;
}
.ul li:first-child {
    border-radius: 12px 12px 0px 0px;
}
.ul li:hover {
    opacity: 1;
    transform: translate(-7px, -4px);
    border-radius: 6px;
}
.ul li span {
    font-size: 1.4rem;
    color: #000;
}

Tempat belajar membuat card hover ini dari luisdanielroviracontreras. Untuk font dan icon saya menggunakan library dari Google