javascript - 悬停在图像上的效果

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 位。这意味着“显示 .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。