Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to display a magnifying glass icon in the center of an image on hover using CSS. https://sridharkatakam.com/how-to-display-a-magnifying-glass-icon-in-the-center-of-an-image-on-hover-using-css/
// 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' );
}
.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;
}
}
<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>
// 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' ) );
}
}
.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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment