在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文章的圖片上添加一個「陰影」

回答

相關問題