懸停在圖像上的標題會導致圖像下方出現白色的空白

我正在用WordPress構建一個網站。在我的主頁上，我需要一個不同產品的圖片網格（10 x 3），當您將鼠標懸停在每張圖片上時，會彈出一個帶有產品名稱的標題。懸停在圖像上的標題會導致圖像下方出現白色的空白

我已經設法做到3/4，但每行下面都有這個巨大的空白。 :(

我使用SiteOrigin編輯器部件插入的圖像，並使用HTML和CSS編寫的懸停效果見下當前編碼

HTML：。

<div id="pic"> 

<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" /> 
<p class="text">Summer Mikan</p> 

</div>

CSS ：

.text { 
    color: #000000; 
    font-size: 16px; 
    font-weight: bold; 
    text-align: center; 
    background: rgba(255, 255, 255, 0.5); 
} 

#pic .text { 
    position:relative; 
    bottom:80px; 
    left:0px; 
    visibility:hidden; 
} 

#pic:hover .text { 
    visibility:visible; 
}

這裏的網站，所以你可以看到我做了什麼：http://peacefruit.net

第一行有標題，但也有討厭的差距。最下面三行是我希望它看起來如何的示例（圖片之間沒有邊界或間隙）。所有行和單個小部件都沒有填充，邊距或排水溝，我已經使用CSS將主題填充調整爲0。

我確定這是一條簡單的代碼，我錯過了，但它讓我瘋狂！請發送幫助。

來源

2016-11-23 pepper222

嘗試添加到您的內聯CSS的siteorigin-板拉伸 overflow:hidden; height:164.89px;

希望這個作品。

謝謝！

來源

2016-11-23 06:28:05 realtymarker

在你的情況
該ID應該是唯一的。
因此，最好將#pic更改爲類
此外，樣式中的<p>標記包含padding-bottom，它將解決空白問題。

改變每個PIC以下 HTML：

<div class="pic"> 
    <img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png"> 
    <div class="text">Summer Mikan</div> 
</div>

CSS：

.pic{ 
    position: relative; 
} 

.pic .text{ 
    position: absolute; 
    top: 80px; 
    width: 100%; 
    visibility: hidden; 
}

那麼它應該工作。

來源

2016-11-23 07:08:18

WordPress主題的樣式表可能會有很多CSS膨脹，所以您在正確的軌道上創建自定義樣式表，以解決您期望的樣式細微差別。

由於這是一個響應式主題，最好從移動優先的角度開始解決這個問題。

首先要修剪是bottom-margin: 30px;爲.panel-grid-cell，像這樣：

.home #main .panel-grid-cell { 
    margin-bottom: 0; 
}

接下來的事情是糾正你的HTML標記。 pic的值賦予多個id屬性。 An id attribute is used to denote a unique element. The class attribute denotes a non-unique element。pic應改爲class屬性，因爲佈局中的許多元素都使用此掛鉤值。就像這樣：

<div class="pic">

我注意到，img.hover和p.text越來越包裹在不必要的<p>標籤。確保在SiteOrigin編輯器中不會發生這種情況。

您應該然後修剪bottom-margin: 1.5em爲.pic的div裏面的段落（注意pic指定爲class鉤.pic，而不是id掛鉤，這將有#pic）：

.pic p { 
    margin-bottom: 0; 
}

要更接近，.pic div上應使用相對定位，以確保後續造型建議（position: absolute;）生效：

.pic { 
    position: relative; 
}

然後，對盤旋圖像時出現的文本：

p.text { 
    position: absolute; 
    width: 100%; 
}

以上樣式將用於移動工作，但你的主題是有求必應，你可能需要考慮不同部分的造型變化屏幕尺寸。

對於平板電腦，你需要一個媒體查詢是這樣的：

@media (min-width: 600px) { 
    .some-class { 
    some-property: some-value; 
    } 
    etc... 
}

最後，對於臺式機：

@media (min-width: 1000px) { 
    .some-class { 
    some-property: some-value; 
    } 
    etc.... 
}

來源

2016-11-23 07:35:31 jacefarm

謝謝大家對你的幫助:)一些與周圍擺弄後建議和軟件更新，現在沒有差距！

我以爲我會發布我的最終代碼，以防任何人有類似的問題，它可能有一定的幫助。（注意：有些小的樣式變化與原始文章不同，但對其工作方式沒有影響）。

HTML：

<div class="pic"> 
 
    <img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/> 
 
    <div class="text">Summer Mikan</div> 
 
</div>

Widget類：

fade

CSS：

.fade { 
 
    -webkit-opacity: 0.6; 
 
    -moz-opacity: 0.6; 
 
    opacity: 0.6; 
 
} 
 

 
.fade:hover { 
 
    -webkit-opacity: 1; 
 
    -moz-opacity: 1; 
 
    opacity: 1; 
 
} 
 

 
.pic { 
 
    position: relative; 
 
} 
 

 
.text { 
 
    color: #FFFFFF; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    background: rgba(214, 187, 14, 0.85); 
 
} 
 

 
.pic .text { 
 
    position:absolute; 
 
    top: 0px; 
 
    width: 100%; 
 
    visibility:hidden; 
 
} 
 

 
.pic:hover .text { 
 
    visibility:visible; 
 
} 
 

 
.pic p { 
 
    margin-bottom: 0px; 
 
}

真高興終於作品，多感謝大家！

來源

2016-12-12 00:45:42 pepper222

懸停在圖像上的標題會導致圖像下方出現白色的空白

回答

相關問題