Hiệu ứng hình ảnh với HTML và CSS



Hiệu ứng hình ảnh đơn giản HTML và CSS. Bạn có thể Custom để có hiệu ứng hình ảnh đẹp, hoặc đơn giản là trò chơi lật ô bài.

1. HTML

<div class="container">
	<div class="cards">
		<div class="card">
			<h2>Lorem ipsum</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua.
			</p>
			<div class="number">
				<h1>1</h1>
			</div>
		</div>
	</div>

	<div class="cards">
		<div class="card">
			<h2>Lorem ipsum</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua.
			</p>
			<div class="number">
				<h1>2</h1>
			</div>
		</div>
	</div>

	<div class="cards">
		<div class="card">
			<h2>Lorem ipsum</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua.
			</p>
			<div class="number">
				<h1>3</h1>
			</div>
		</div>
	</div>
</div>

2. CSS

*{margin: 0;padding: 0;}

body {
	font-family: sans-serif;
	background-color: #333;
	height: 100vh;
	overflow: hidden;
}

.container {
	display: flex;
	width: 80%;
	height: 100%;
	margin: auto;
	justify-content: space-around;
	position: relative;
}

.container .cards {
	display: flex;
	align-items: center;
	width: 250px;
	height: 350px;
	background-color: #185399;
	margin: auto;
	position: relative;
	cursor: pointer;
	box-shadow: 0 0 10px #185399;
}

.cards .card h2{
	text-align: center;
	color: white;
}

.cards .card p {
	text-align: center;
	font-size: 14px;
	color: white;
	padding: 20px;
	box-sizing: border-box;
}

.cards .number {
	position: absolute;
	bottom: 0;
	width: 250px;
	height: 100%;
	background-color: white;
	transition: .5s all;
	text-align: center;
}

.cards .number h1{
	line-height: 350px;
	background-image: url(https://imgur.com/ergqH1F.png);
	background-size: cover;
	background-position: -60px center;
	color: white;
	font-size: 80px;
}

.cards:hover .number h1 {
	transition: .3s all;
	opacity: 0;
}

.cards:hover .number {
	transition: .4s all;
	height: 0;
	width: 0;
}

3. JAVASCRIPT




Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.