Hover effect over image
I am trying to apply hover effect to images in my WP theme. This is a grid of images created using the message depicted on them.
the grid is managed 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 rotate a "box-overly" div into an overlay on top of the image, but cannot find the correct js and css.
css which I have right now ...
.box-ovrly {
z-index: 100;
position: absolute;
top: 0px
left: 0px;
}
It places the title and category on top of the image. I want it to have a background to cover the image on hover, but not display at all until it hovers over
perfect example of what I'm looking for (eventually different background colors, etc. But I don't want any text in the image not to hover) for this portfolio
source to share
You can achieve this effect with pure CSS.
JSFiddle - http://jsfiddle.net/y3z4pojv/6/
In the code below, the most important part is the bit .element:hover > .elementHover
. This means "display .elementHover
, which is a child .element
WHEN ONLINE .element
."
Just check how the HTML is structured in this example and emulates that in your WordPress code. (With appropriate names for your elements, of course).
CSS Test:
.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;
}
HTML test:
<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>
Note that you can just have color DIV
instead of IMG
on hover, all you have to do is change the tag IMG
to DIV
and set the background .hoverBackground
.
Have to do something like this, but hopefully it works for you. Modify for your use of course. This is a simplified version
Ver. 1 (html, JS and CSS in 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);
}
);
source to share