懸停對圖像的影響

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。