Hover effect over image

Question

I am trying to apply a hover effect to the images in my WP theme. It is a grid of images created by the featured image on the posts.

the grid is controlled in 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 want to turn 'box-overly' div into the overlay on top of the image but can't find the proper js and css.

the css I have right now ...

.box-ovrly {
z-index: 100;
position: absolute;
top: 0px
left: 0px;
}

It puts the title and category on top of the image. I want it to have a background to cover the image on hover, but not to show up at all until hovered over

the perfect example of what i'm looking to do (eventually different background colours, etc. But I don't want any text on the image until hovered) for is on this portfolio

http://redantler.com/work/

Answer 1

You can achieve that effect with pure CSS.

JSFiddle - http://jsfiddle.net/y3z4pojv/6/

In the code below, the most important part is the .element:hover > .elementHover bit. This means "display .elementHover, which is the child of .element, WHEN .element is being hovered".

Just check out how the HTML is structured in this example, and emulate that in your WordPress code. (With the appropriate names for your elements, of course).

Test CSS:

.element {
    position: relative;
    display: inline-block;
    z-index: 0;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.strawberries {
    background: url('http://images4.fanpop.com/image/photos/16300000/Delicious-pretty-fruit-fruit-16382128-670-562.jpg');
}
.watermelon {
    background: url('http://fyi.uwex.edu/safepreserving/files/2013/08/watermelon.jpg');
}
.pineapple {
    background: url('http://static.giantbomb.com/uploads/original/7/71129/2672509-6564604021-pinea.jpg');
}
.element:hover > .elementHover {
    opacity: 1;
    z-index: 1;
}
.elementHover {
    position: absolute;
    opacity: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    transition: all 500ms;
}
.hoverContent {
    position: relative;
    z-index: 10;
    color: #fff;
    font-size: 200%;
    padding: 1em;
}
.hoverBackground {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.green {
    background: green;
}
.red {
    background: red;
}

Test HTML:

<div class="element strawberries">
    <div class="elementHover">
        <img class="hoverBackground" src="http://www.aux.tv/wp-content/uploads/2012/09/how-to-rick-roll-somebody.jpg"/>
        <span class="hoverContent">
            Hello there
        </span>
    </div>
</div>
<div class="element watermelon">
    <div class="elementHover">
        <div class="hoverBackground green"></div>
        <span class="hoverContent">
            Goodbye now
        </span>
    </div>
</div>
<div class="element pineapple">
    <div class="elementHover">
        <div class="hoverBackground red"></div>
        <span class="hoverContent">
            ...Not yet
        </span>
    </div>
</div>

Notice that you can just have a plain colored DIV instead of an IMG on hover, all you need to do is change the IMG tag to DIV and set a background to .hoverBackground.

Answer 2

Had to do something similar, but hopefully this works for you. Of course, modify for your usage. This is a simplistic version

Ver. 1 (html, JS and CSS in the link, JS posted here): http://jsfiddle.net/SnvMr/6/

$('.effect').hover(
    function() {
        $('.effect').not(this).stop().fadeTo(500, 0.33);
        $(this).find('p').fadeIn(500);
    }, function() {
        $('.effect').stop().fadeTo(500, 1);
        $('.effect p').fadeOut(500);
    }
);

Ver. 2: http://jsfiddle.net/deelite/SnvMr/12/