不同的Wordpress特色图像叠加效果

Question

我有一个图像网格(由每个帖子的特色图像创建),并希望将悬停效果应用于每个图像.

我想用彩色叠加显示帖子的标题.整个图像被覆盖/替换为彩色背景,其中标题包含在图像框内.

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

当前代码(content 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');
    }
);

演示版