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.
Screenshot:
Screencast:
Step 1
Load Font Awesome by adding this in your child theme’s functions.php:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } | |
| } |
You could skip step 1 by using if your theme supports ionicons as a lot of Genesis themes do.