Membuat Glass Effect Card menggunakan HTML CSS

Pada tulisan kali ini belajar membuat glass effect card menggunakan HTML dan CSS supaya web tampil lebih menarik. Hasilnya seperti gambar ini:

Kode HTML

<div class="card">
	<div class="card-item">
		<h1>Prambanan</h1>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam corrupti qui quis voluptatum, commodi officiis voluptate in perspiciatis eligendi aliquid cumque totam ratione, delectus sequi porro hic, et facilis officia.</p>
	</div>
</div>

Kode CSS

.card {
    width: 350px;
    height: 500px;
    background-image: url("https://i.postimg.cc/X77pS6xy/IMG-1578a.jpg");
    background-size: cover;
    box-shadow: 0 14px 25px 0px #00000026;
    position: relative;
    border-radius: 15px;
}
.card-item {
    position: absolute;
    padding: 30px;
    font-family: sans-serif;
    backdrop-filter: blur(10px);
    color: #fff;
    bottom: 20px;
    left: 20px;
    right: 20px;
    border-radius: 12px;
}
.card-item h1 {
    margin-bottom: 12px;
}
.card-item p {
    font-size: 15px;
}

Tempat belajar ini dari hikarisproject_