Webgensis

Download Image Grid with Hover effects plugin to easily show grid layout of your images on WordPress 
site that looks elegant and attractive. This plugin creates a grid layout with short title and description on 
hover effect of the image.
It’s an easy to manage plugin that is available for free to download from the WordPress Plugin directory. 
You can easily show grid layout of images using the simple shortcode. The WordPress Plugin “Image Grid 
with Hover Effects” easily manages custom post type of images with the backend to display image grid 
beautifully.
You can link the displayed images internally or externally and the plugin will allow you to choose the 
option for whether you want to open these links in a new tab or not. 
The image grid will be responsive and shown beautifully on every sized device. To get the best output 
for image grid, the best option is to choose the images of equal sizes.

Image grid with hover effects

Responsive image grid with directional hover. Link your images to both external and internal pages.

Ignacio Perez

Create mobile responsive buttons with background images and pure CSS3 animated on hover effects. Include a button title and a subtitle that appears when the user move the mouse hover the button. Recommended to be used as a page or sections links.
Customize the color and the opacity of the background on hover effect, change the default buttons size and include your custom CSS code.
Add the shortcodes to your page or post to create the buttons.
Button shortcut Options:
<ul>
<li>title: title of the button, it is a <code>h3</code> element.</li>
<li>subtitle: appears when the user move the mouse hover the button.</li>
<li>link: button link.</li>
<li>image: background image link.</li>
<li>width: button width.</li>
<li>height: button height.</li>
</ul>
<h4>Examples</h4>
Multiple reponsive buttons:
<pre><code>[hover-image-row]
 [hover-image-button title="Section 1" subtitle="It's and amazing section" link="http://my-section-link" image="http://my-image-link" ]
 [hover-image-button title="Section 2" subtitle="Enter here for more info" link="http://my-section-link" image="http://my-image-link" ]
 [hover-image-button title="Section 3" subtitle="This is the best section" link="http://my-section-link" image="http://my-image-link" ]
[/hover-image-row]
</code></pre>
Single button example:
<pre><code>[hover-image-button title="Section 1" subtitle="It's and amazing section" link="http://my-section-link" image="http://my-image-link" ]
</code></pre>

Hover Image Button

Create mobile responsive image buttons with pure CSS3 animated on hover effects.

Image grid with hover effects vs Hover Image Button