Cách hiển thị biểu tượng kính lúp ở giữa hình ảnh khi di chuột bằng CSS

Bạn muốn hiển thị biểu tượng lúp khi di chuột vào hình ảnh?

Trong hướng dẫn này, tôi sẽ chia sẻ mã để hiển thị biểu tượng kính lúp Font Awesome khi di chuột qua hình ảnh thu nhỏ. Chúng tôi sẽ sử dụng plugin FooBox để mở toàn bộ hình ảnh trong hộp đèn khi hình ảnh thu nhỏ hoặc biểu tượng được nhấp vào.

Bước 1

Tải phông chữ Awesome bằng cách thêm cái này vào functions.php của chủ đề con của bạn :

// Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}

Bước 2

Đặt cấu trúc HTML của bạn như sau:

<div class="portfolio-image">
<a href="http://example.com/full-image.jpg" class="foobox"><img src="http://example.com/thumbnail-image.jpg" alt=""></a>

<div class="overlay">
<a href="http://example.com/full-image.jpg" class="magnifying-glass-icon foobox">
<i class="fa fa-search"></i>
</a>
</div>
</div>

Để đưa ra một ví dụ thực tế, đây là đoạn mã tôi đã thêm trong single-portfolio.php của một trang web để hiển thị hình ảnh nổi bật có kích thước trung bình phía trên nội dung trên các mục nhập đơn lẻ của Portfolio CPT với hình ảnh trung bình liên kết với hình ảnh có kích thước đầy đủ của nó:

// Display featured image above content
add_action ( 'genesis_entry_content', 'sk_show_featured_image_single_portfolio', 9 );
function sk_show_featured_image_single_portfolio() {
if ( $image = genesis_get_image( 'format=url&size=medium' ) ) {
printf( '<div class="portfolio-image"><a href="%s" rel="bookmark" class="foobox"><img src="%s" alt="%s" /></a><div class="overlay"><a href="%1$s" class="magnifying-glass-icon foobox"><i class="fa fa-search"></i></a></div></div>', genesis_get_image( 'format=url&size=full' ), $image, the_title_attribute( 'echo=0' ) );

}
}

Bước 3

Thêm cái này vào style.css :

.portfolio-image {
	position: relative;
	display: inline-block;
}

.portfolio-image img {
	vertical-align: top;
}

.magnifying-glass-icon {
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	padding: 20px;
	border: 1px solid #fff;
	line-height: 1;
	opacity: 0;
}

.magnifying-glass-icon:hover {
	background: rgba(0,0,0,0.5);
	color: #fff;
}

.portfolio-image:hover .magnifying-glass-icon {
	opacity: 1;
}

@media only screen and (max-width: 400px) {
	.portfolio-image {
		display: block;
	}
}

Nếu bạn chỉ muốn tạo liên kết biểu tượng kính lúp tới URL đích chứ không phải hình ảnh thu nhỏ, hãy sử dụng CSS này để thay thế:

.portfolio-image {
	position: relative;
	display: inline-block;
}

.portfolio-image img {
	vertical-align: top;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* background-color: #151515; */ /* for dark overlay on top of the image */
	background: transparent;
	opacity: 0;
	transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.portfolio-image:hover .overlay {
	opacity: 0.8;
}

.magnifying-glass-icon {
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	padding: 20px;
	border: 1px solid #fff;
	line-height: 1;
}

.magnifying-glass-icon:hover {
	background: rgba(0,0,0,0.5);
	color: #fff;
}

@media only screen and (max-width: 400px) {
	.portfolio-image {
		display: block;
	}
}