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

							

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3

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.