悬停对图像的影响

Question

我想将悬停效果应用于我的WP主题中的图像。它是由帖子上的精选图片创建的图片网格。

网格控制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-## --> 

我想打开“框中，过于” DIV到的图像上叠加却找不到合适的JS和CSS。

的CSS我现在...

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

它把标题和类别上的图像的顶部。我希望它有一个背景来覆盖悬停的图像，但不会显示出来，直到徘徊在

完美的例子，我期待做的事情（最终不同的背景颜色等，但我不“不想在这个组合

http://redantler.com/work/

Answer 1

不得不做类似的东西是图像，直至悬停在任何文本），但希望这对你的作品。当然，修改你的使用。这是一个简单的版本

Ver。 1（HTML，JS和CSS中的链接，JS这里发布）： 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); 
    } 
); 

版本。 2： http://jsfiddle.net/deelite/SnvMr/12/

Answer 2

您可以使用纯CSS实现该效果。

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

在下面的代码中，最重要的部分是.element:hover > .elementHover位。这意味着“显示.elementHover，这是.element的孩子，当.element被徘徊时”。

只要看看这个例子中的HTML是如何构造的，并在你的WordPress代码中模拟。 （当然，使用适当的元素名称）。

测试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; 
} 

测试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> 

注意，你可以有一个素色DIV，而不是在悬停的IMG，所有你需要做的将IMG标记更改为DIV，并将背景设置为.hoverBackground。