Добавьте «тень» над изображением в сообщении Wordpress

Question

Я пытаюсь добавить «тень», который появляется над изображениями, когда пользователь на них нависает, но я не могу заставить его работать. Когда я запускаю то, что у меня есть, тень заполняет всю область сообщений, а не только ту, что я хочу.

Может ли кто-нибудь помочь? Благодарю.

Вот HTML, который загружает почту и CSS для .shade DIV Я настроил:

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

Wow. Я просто решил это, это было намного проще, чем я думал, хотя я действительно не делал то, что хотел. У меня просто был пост-дед на 50% непрозрачность при наведении.

Answer 1

Вы должны указать высоту/ширину на .shade в соответствии с высотой/шириной изображения контейнера (.entry). Поскольку div пуст, он будет находиться в одной точке, а если он будет абсолютным, он займет всего 1 пиксель.

Также установлено position: relative для .entry