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-## -->

我想将“box-overly”div转换为图像顶部的叠加层，但找不到合适的js和css。

我现在拥有的CSS ...

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

它将标题和类别放在图像的顶部。我希望它有一个背景来覆盖悬停时的图像，但不要显示，直到悬停在

我正在寻找的最佳例子（最终不同的背景颜色等，但我不希望图像上有任何文字，直到徘徊）才是这个投资组合

http://redantler.com/work/

Answer 1

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

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

在下面的代码中，最重要的部分是.element:hover > .elementHover位。这意味着＆＃34;显示.elementHover，.element的孩子，.element正在徘徊＆＃34;。

在此示例中查看HTML的结构，并在WordPress代码中模拟HTML。（当然，使用适当的元素名称）。

测试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的背景。

Answer 2

不得不做类似的事情，但希望这对你有用。当然，请修改您的使用方法。这是一个简单的版本

版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/

悬停效果超过图像

2 个答案: