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');
    }
);

DEMO

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

1 个答案: