kết hợp Custom Data Attributes và hàm attr()

Bài đăng này đã không được cập nhật trong 6 năm

Hàm attr(), bên cạnh ứng dụng vào tootips, ta còn có thể xây dựng thumbnail có tittle và description để kết hợp với data attributes. Bạn chỉ cần viết đoạn code HTML theo cấu trúc sau:

<a class="caption" href="#" data-title="Vulture" data-description="...">
  <img src="img.jpg" alt="Illustration"/>
</a>

Và đến đây bạn có thể dùng hàm attr() để hiển thị tittle và description:

.caption::after {
  content: attr(data-title);
    ...
}

Dưới đây mình làm một ví dụ thumbnail với captions động hiển thị khi hover:

HTML:

<html>
<body>
	<main>
		<section id="container">
			<div class="thumbnail"
				data-title="Boost your bussiness with Global IT team"
				data-description="フランジアは2012年創業、現在6ヶ国、11都市にて1000名体制で活動しているITプロフェッショナルチームです。社員の8割がエンジニアで、システム設計・UI/UX設計・デザイン・インフラ構築を含むプロダクト開発、スタートアップのアクセラレートプログラム、テクノロジー人材育成を主な事業として展開しています。">
				<img src="https://framgia.com/wp-content/themes/frg-framgia/images/img_who.jpg" alt="Meat" width="300">
			</div>
		</section>
	</main>
</body>
</html>

CSS:

/* DEMO HNV */
*, *:after, *:before {
	box-sizing: border-box;
}
html {
	height: 100%;
}
body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	user-select: none;
}
#container {
	width: 800px;
	margin: 0 auto;
}
.thumbnail {
	-webkit-backface-visibility: hidden;
	display: inline-block;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	background: #000;
	box-shadow: 0 15px 50px rgba(0,0,0,.5);
}
.thumbnail img {
	display: block;
    width: 100%;
	transition: opacity .2s ease-in-out;
}
.thumbnail:hover img {
	opacity: .5;
}
.thumbnail::after,
.thumbnail::before {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 50%;
	transition: transform .4s ease-out;
	color: #fff;
}
.thumbnail::after {
	content: attr(data-title);
	top: 0;
	padding-top: 55px;
	transform: translateY(-100%) scale(.8);
	background: rgba(0,0,0,.4);
	font-size: 36px;
	font-weight: 300;
	font-family: Merriweather, serif;
	text-align: center;
}
.thumbnail::before {
	content: attr(data-description) "…";
	top: 50%;
	padding: 20px;
	transform: translateY(100%) scale(.8);
	background: rgba(107,38,68,.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #f1f1f1;
	font-size: 16px;
}
.thumbnail:hover::after,
.thumbnail:hover::before {
	transform: translateY(0%) scale(1);
}

Kết quả + Demo

Như vậy, chỉ với CSS ta cũng có thể giải được vấn đề và đồng thời có thêm sự tự do trong sáng tạo của mình. Mình hi vọng bài viết trên sẽ hữu ích với bạn, Cảm ơn bạn đã theo dõi !!

Mục lục