懸停在流體網格佈局上的圖像的標題 - Dreamweaver CC

Question

我正在基於流體網格佈局的響應網站Dreamweaver上我的項目。我想揭開懸停圖像的標題。我在這個論壇上嘗試了很多教程並嘗試了答案，但由於我在使用流體佈局，因此無法像在普通HTML中那樣設置精確的圖像大小（在Px中）。這樣我就不能在圖像層頂部正確疊加另一層圖層。

所以我決定，以確保圖像和同一層上懸停動作文本顏色的文本將從（透明白）改變，但我想淡出我的形象一點點舒服，所以我試着在懸停行動中將不透明度從（1到0.8）減少。但是，這使得文本看起來很褪色，我不希望這種情況發生。

有些人可以告訴我如何在正確地懸停在流體網格佈局上腳本的圖片腳本？謝謝！

P.S我不能添加我的CSS代碼和圖像鏈接的問題，請檢查我的意見！

Answer 1

那麼，我已經做了一些例子，如示例1不幸的是我無法使用您的代碼。 這裏是代碼：

.wrapper { 
 
    min-width: 1000px; 
 
    margin: 5% auto; 
 
} 
 
.imgs { 
 
    float: left; 
 
    margin: 5px; 
 
    border:1px solid #cacaca; 
 
    border-radius:5px; 
 
    cursor: pointer; 
 
} 
 
.imgs .caption:hover { 
 
    opacity: 0.7; 
 
    color: #fff; 
 
    height:305px; 
 
    background: #000; 
 
} 
 
.caption { 
 
    opacity: 0; 
 
    color: #fff; 
 
    width: 300px; 
 
    height: 300px; 
 
    font-size: 20px; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    margin-top: -304px; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    -webkit-transition: all 0.50s ease-in-out; 
 
    -moz-transition: all 0.50s ease-in-out; 
 
    -ms-transition: all 0.50s ease-in-out; 
 
    -o-transition: all 0.50s ease-in-out; 
 
    transition: all 0.50s ease-in-out; 
 
} 
 
h1 { 
 
    margin-top: 100px; 
 
}

<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="imgs"> 
 
     <img src="http://www.gaykendds.com/site/wp-content/uploads/2015/03/bigstock-Red-apple-isolated-25800164-300x300.jpg"> 
 
     <div class="caption"> 
 
     <h1> Fruits </h1> 
 
     <p>Some red Apple</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="http://www.countryoven.com/ProductImages/big/Mixed-Fruit-Hamper.jpg"> 
 
     <div class="caption"> 
 
     <h1> Fruits </h1> 
 
     <p>Mixed Fruit Hamper</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="http://disfrutaltd.com/wp-content/uploads/2015/02/Peach-300x300.jpg"> 
 
     <div class="caption"> 
 
     <h1> Fruits </h1> 
 
     <p>Some Peaches Fruits</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="https://mauldinfamily1.files.wordpress.com/2013/03/lemon1.jpg"> 
 
     <div class="caption"> 
 
     <h1> Fruits </h1> 
 
     <p>Some lemon Fruits</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="http://kartdeliver.com/wp-content/uploads/2015/06/green-apple-300x300.jpg"> 
 
     <div class="caption"> 
 
     <h1> Fruits </h1> 
 
     <p>Some green Apple</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=59589715"> 
 
     <div class="caption"> 
 
     <h1> Fruits </h1> 
 
     <p>Some Orange Fruits</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="http://my.xfinity.com/blogs/lifestyle/files/2012/10/tomato.jpg"> 
 
     <div class="caption"> 
 
     <h1> Vegetables </h1> 
 
     <p>Some Tomato</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="http://2.wlimg.com/product_images/bc-full/dir_67/1994770/almond-kernels-1536174.jpg"> 
 
     <div class="caption"> 
 
     <h1> Seeds </h1> 
 
     <p>Some Almond</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="http://beyouthful.net/wp-content/uploads/2013/04/1152191_avocado_on_white.jpg"> 
 
     <div class="caption"> 
 
     <h1> Vegetables </h1> 
 
     <p>Some Avocado Fruits</p> 
 
     </div> 
 
    </div> 
 
    <div class="imgs"> 
 
     <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=45920356"> 
 
     <div class="caption"> 
 
     <h1> Fruits </h1> 
 
     <p>Some Cherry Fruits</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

按填充頁看到它在全屏幕它與所有瀏覽器兼容。

讓我知道你是否有任何問題。