jquery - 不同的Wordpress特色图片叠加效果

Question

我有一个图像网格(由每个帖子的特色图像创建)，并且希望对每个图像应用悬停效果。

我希望它显示带有彩色叠加层的帖子标题。整个图像被彩色背景覆盖/替换，图像框内包含帖子标题。

但最重要的是，我希望每个帖子都有不同颜色的背景。

当前代码(内容page.php)-

  <article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>>
    <?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" src="<?php echo $image ?>"/></a>
    <?php endif; ?> 

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

 </article><!-- #post-## -->

努力弄清楚一般如何叠加，然后转向更复杂的样式，如特定颜色。我发现的示例使用链接标签的“悬停”效果，但我无法操纵它来为我工作

例如。

<a href="#" id="box-ovrly"><img src="http://1.bp.blogspot.com/-    todb82eBRF4/T2iE-lgY2LI/AAAAAAAABNo/HMhNfppjrHg/s1600/reddit%2Balien.JPG">    <p>REDDIT!</p></a> 

悬停绝对定位在图像上

Answer 1

也许这就是您想要的，请注意应用的 CSS。还有:

// Generate Random Color
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

$('article').hover( 
    function () {
        var color = getRandomColor();
        $('.box-ovrly', this).addClass('ovrly_start');
        $('.box-ovrly', this).css('background', color);        
    }, 
    function() {
       $('.box-ovrly', this).removeClass('ovrly_start');
    }
);

DEMO