圖像上的覆蓋圖像等於固定尺寸的圖像

-1

我需要對圖像進行懸停效果，即使圖像在響應時變大或變小，圖像尺寸也會固定。圖像上的覆蓋圖像等於固定尺寸的圖像

<div> 
<img scr="abc.jpg"> 
</div>

來源

2017-08-30 Shakil Ahmad

什麼樣的懸停效果？如果可以使用過濾器完成效果，可以使用CSS，否則使用JS。 –

如果您想使用疊加效果進行懸停，您應該設置圖像的寬度和高度。 – zynkn

因此，在圖像周圍放置一個內聯容器元素，然後... – CBroe

.img-wrap{ 
 
    width: 400px; 
 
    height: auto; 
 
    position: relative; 
 
} 
 
.img-wrap > img{ 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.overlay{ 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: rgba(0,0,0,0.5); 
 
    display: none; 
 
} 
 
.img-wrap:hover > .overlay{ 
 
    display: inline-block; 
 
}

<div class="img-wrap"> 
 
    <div class="overlay"></div> 
 
    <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png"> 
 
    
 
</div>

來源

2017-08-30 11:23:45 zynkn

謝謝。一個簡單的解決方案 –

@ShakilAhmad這是我的榮幸 – zynkn

圖像上的覆蓋圖像等於固定尺寸的圖像

回答

相關問題