How to display a magnifying glass icon in the center of an image on hover using CSS

Posted on

Want to show a magnifying icon when hovering on an image?

In this tutorial I am going to share the code for displaying a Font Awesome magnifying glass icon when a thumbnail image is hovered. We are going to use FooBox plugin to open the full image in a lightbox when the thumbnail image or the icon is clicked.

Step 1

Load Font Awesome by adding this in your child theme’s functions.php:

// 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' );
}

Step 2

Set your HTML structure like this:

<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>

To give a practical example, here’s the code I added in single-portfolio.php of a site to display medium sized featured image above the content on single entries of a Portfolio CPT with the medium image linking to its full sized image:

// 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' ) );

}
}

Step 3

Add this in 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;
	}
}

If you would like to make only the magnifying glass icon link to the target URL but not the thumbnail image, use this CSS instead:

.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;
	}
}