I've been attempting to add a hover effect to the images in my WordPress theme. The images are displayed in a grid format, created by the featured image on the posts.
The grid layout is controlled within content.php
<?php
/**
* controls main grid images
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>>
<div class = "box-ovrly">
<h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="box-meta"><?php the_category(', '); ?></div>
</div>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 750, 560, true ); //resize & crop the image
?>
<?php if($image) : ?>
<a href="<?php the_permalink(); ?>"> <img class="img-responsive hover-decal" src="<?php echo $image ?>"/></a>
<?php endif; ?>
</article><!-- #post-## -->
I am hoping to transform the 'box-overly' div into an overlay that appears on top of the image when hovered over, but I'm struggling to find the appropriate JavaScript and CSS.
Here is the current CSS code...
.box-ovrly {
z-index: 100;
position: absolute;
top: 0px
left: 0px;
}
Currently, this places the title and category on top of the image. However, my goal is to have a background cover the image on hover without displaying any text until it's hovered over.
An example of the desired effect (eventually with different background colors, etc.) can be seen on this portfolio page: