css (html) 中圖片疊加的問題

Question

我在我的 html 項目中在圖像上添加疊加層時遇到問題。 當它懸停時，它應該看起來像來自圖像底部的疊加層，但它只是像所有圖像上的鏈接。 這是來自 html 和 css 的代碼：

 .tile5 { width: 480px; margin: 10px; height: 304px; float: left; } .overlay { position: relative; width: 480px; height: 304px; } .overlay .link { position: absolute; display: block; width: 100%; height: 100%; background-color: #111; left: 0px; top: 0px; opacity: 0; transition: opacity 0.5s ease-in-out; } .overlay:hover .link { opacity: 0, 8; }

 <div class="square"> <div class="tile5"> <div class="overlay"> <a href="#"> <img src="grafika/obraz.jpg" style="width: 480px; height: 304px; border-radius: 10px;" /> </a> <a href="#" class="link">tekkst teskttekkst teskttekkst teskttekkst teskttekkst teskt</a> </div> ...other element in div 'square' </div>

我希望有人會幫助;）

Answer 1

你可以嘗試這樣的事情：

 .tile5 { width: 480px; margin: 10px; height: 304px; float: left; position:relative; } .overlay { position: relative; width: 480px; height: 304px; } .overlay .link { position: absolute; display: block; background-color: rgba(0, 0, 0, 0.4); left: 0px; top: 40%; opacity:0; transition: opacity 0.5s ease-in-out; z-index:99999; color:white; padding:10px 20px; text-decoration:none; } .overlay:hover .link { opacity: 0.8; }

 <div class="square"> <div class="tile5"> <div class="overlay"> <a href="#"> <img src="https://images.pexels.com/photos/206959/pexels-photo-206959.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width: 480px; height: 304px; border-radius: 10px;" /> </a> <a href="#" class="link">tekkst teskttekkst teskttekkst teskttekkst teskttekkst teskt</a> </div> ...other element in div 'square' </div>

Answer 2

看起來您的 HTML 結構有點偏離。 帶有類覆蓋的標簽。

這就是我將如何去做。 我認為您正在嘗試在懸停時顯示圖像標題

HTML

 <div class="square">
        <a href="#"> 
          <img src="grafika/obraz.jpg" style="width: 480px; height: 304px; border-radius: 10px;"/>
          <span>Caption Here</span>
        </a>
</div>

CSS

.square{
    position: relative;
    width: 480px;
    height: 304px;
    float: left;
}
.square a span{
  background:#efebeb;
  max-width: 480px;
  width:100%;
  color:#000;
  padding:20px 0px;
   position: absolute;
   left:0;
   bottom:0;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
   text-align:center;
}
.square a:hover span{
  opacity: 0.8;
}

希望這可以幫助