Tạo hiệu ứng hover đơn giản đẹp mắt bằng css 3 phần 4

Tiếp tục với loạt bài viết hướng dẫn làm những hiệu ứng hover với một vài thuộc tính đơn giản của css 3, nhưng chất lượng. Ở bài viết này mình sẽ làm hiệu ứng tương tác với hình ảnh phần 4. Mình xin được bắt đầu bài viết.

Mô tả hiệu ứng

Di chuột vào từng hình ảnh scale ra rồi biến mất, đồng thời xuất hiện một khối đên chứa nội dung scale ra và dừng.

Hiệu ứng hover tương tác với hình ảnh phần 4

Demo: Các bạn click vào đây để xem kết quả, bây giờ mình sẽ code và giải thích ngay phía sau.

Code: html

<!doctype html>
<html>
<head>
	<title>hover</title>

</head>
<body>
	<div class="wraper">
		<div class="container">
			<div class="img">
				<img src="http://file.vforum.vn/hinh/2014/12/chibi-naruto-de-thuong-3.jpg" alt="">
			</div>
			<div class="border">
			</div>
		</div>
		<div class="txt">
			<h1>Ok!</h1>
		</div>
	</div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>hover</title>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

Code:css

html,body {
		height: 100%;
		width: 100%;
	}

	* {
		padding: 0;
		margin: 0;
	}
	.wraper{
		width: 200px;
		height: 200px;
		border-radius: 50%;
		cursor: pointer;
		position: relative;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	.container {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		
		position: absolute;
		
		transition: ease-in-out 0.4s;
	}
	div.border{
		width: 91%;
		height: 91%;
		border-radius: 50%;
		position: absolute;

		border-top: 9px solid #ffc107;
		border-bottom: 9px solid black;
		border-left: 9px solid #ffc107;
		border-right: 9px solid black;
	}

	.img {
		width: 90%;
		height: 90%;
		position: absolute;
		top:5%;
	}

	img {
		width: 100%;
		height: 100%;
	}

	.txt {
		width: 60%;
		height: 60%;
		position: absolute;
		top: 20%;
		left: 20%;
		border-radius: 50%;
		background: black;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;
		opacity: 0;
		transition: ease-in-out 0.4s;
	}

	hr {
		width: 141px;
	}
	.wraper:hover .container {
		transform: scale(1.2);
		opacity: 0;
		transition: ease-in-out 0.4s;
	}
	.wraper:hover div.txt{
		opacity: 1 !important;
		transform: scale(1.7);
		transition: ease-in-out 0.4s;	
	}

html,body {

height: 100%;

width: 100%;

}

* {

padding: 0;

margin: 0;

}

.wraper{

width: 200px;

height: 200px;

border-radius: 50%;

cursor: pointer;

position: relative;

top:50%;

left:50%;

transform: translate(-50%,-50%);

}

.container {

width: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

transition: ease-in-out 0.4s;

}

div.border{

width: 91%;

height: 91%;

border-radius: 50%;

position: absolute;

border-top: 9px solid #ffc107;

border-bottom: 9px solid black;

border-left: 9px solid #ffc107;

border-right: 9px solid black;

}

.img {

width: 90%;

height: 90%;

position: absolute;

top:5%;

}

img {

width: 100%;

height: 100%;

}

.txt {

width: 60%;

height: 60%;

position: absolute;

top: 20%;

left: 20%;

border-radius: 50%;

background: black;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: white;

opacity: 0;

transition: ease-in-out 0.4s;

}

hr {

width: 141px;

}

.wraper:hover .container {

transform: scale(1.2);

opacity: 0;

transition: ease-in-out 0.4s;

}

.wraper:hover div.txt{

opacity: 1 !important;

transform: scale(1.7);

transition: ease-in-out 0.4s;

}

Kết quả:

Giải thích:

Trước tiên chúng ta sẽ phân tích cái giao diện này. Nó gồm một khối to chứa 2 khối gồm khối container và khối txt , khối container sẽ chứa 2 khối nhỏ, 2 khối nhỏ gồm một khối tạo đường viền tròn, một khối chứa ảnh, một khối chứa text. Tất cả đều được đặt border-radius:50% để tạo thành khối tròn.
Tiếp theo chúng ta sẽ css cho từng khối thôi, đặt width height, căn chỉnh bằng position, đặt màu các kiểu.
Tiếp đến tạo hiệu ứng hover, khi di chuột vào khối container và khối txt sẽ xảy ra hiệu ứng cho khối border và khối txt. Ở hiệu ứng này mình sử dụng thuộc trính transform:scale( ) để co giãn khối container và khối txt. Sử dụng transition ease-in-out để làm chậm chuyển động.
Bây giờ tạo một khối wraper chứa các khối trên đặt width cho nó. Và căn giữa khối container bằng position và transform.