在wordpress文章的图片上添加一个“阴影”

-1

我试图添加一个“阴影”，当用户将鼠标悬停在它们上方时，图片上出现，但我似乎无法使其工作。当我运行我现在所拥有的东西时，阴影会填满整个帖子区域，而不仅仅是我想要的那个。在wordpress文章的图片上添加一个“阴影”

任何人都可以帮忙吗？谢谢。

下面是加载后，为.shade股利我已经建立了CSS的HTML：

.shade { 
    background-color: rgba(000, 000, 000, 0); 
    transition: background-color .7s linear; 
    -webkit-transition: background-color .7s linear; 
    -o-transition: background-color .7s linear; 
    -moz-transition: background-color .7s linear; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

div.entry:hover div.shade { 
    background-color: rgba(000, 000, 000, .5); 
}

<div <?php post_class() ?> class="post" id="post-<?php the_ID(); ?>"> 
    <a href="<?php the_permalink() ?>"> 
    <h2><?php the_title(); ?></h2> 
    <div class="entry"> 
     <?php the_content(); ?> 
     <div class="shade"></div> 
    </div> 
    </a> 
</div>

哇。我刚刚解决了这个问题，它比我想象的要容易得多，尽管我没有真正做到我的意思。我只是在悬停时发布了50％的不透明度。

来源

2016-03-28 Ben K.

1.为母公司拥有的立场：相对“财产？ –

2.您可能需要设置.shade的宽度和高度 –

提供的代码中没有图像。无论如何，你似乎要求的是一个***覆盖层***，并且在堆栈溢出之前已经被问过数千次。 http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css/18322705#18322705 –

您需要将高度/宽度设置为.shade以匹配容器图像的高度/宽度（.entry）。由于div是空的，它将在一个px行中，如果它是绝对的，它将只需要1个像素。

还设置position: relative到.entry

来源

2016-03-28 08:21:03

'.entry'的高度各不相同，在这种情况下我会怎么做？帖子内容加载了<？php the_content（）; ？>'这是包含图像的内容。它们虽然尺寸不尽相同，但设置像素宽度和高度不起作用。我试图设置为100％，但也没有效果。 @AamirMahmood –

在wordpress文章的图片上添加一个“阴影”

回答

相关问题