懸停框顏色和圖像不透明度

我有一個圖像和文本下面它包裹在一個「a」標籤。將鼠標懸停在帶有文字的白色框上將灰色框變爲灰色。懸停在圖像上，它具有不透明效果。懸停框顏色和圖像不透明度

如何讓盒子變成灰色，並且圖像不透明度在盤旋時同時發生。目前這些情況單獨發生。這不是一個很大的問題，但如果他們一起發生會更好。

下面是截圖 - https://imgsafe.org/image/ef3964b27c

這是我的HTML;

<div class="w3-third w3-container w3-margin-bottom"> 
 
    <a href="#" style="display:block"> 
 
    <img src="Images/MCR.png" style="width:100%" class="w3-hover-opacity"> 
 
    <div class="w3-container w3-white"> 
 
     <p><b>PSB2 and COM4</b></p> 
 
     <p><b>&nbsp;</b></p> 
 
    </div> 
 
    </a> 
 
</div>

來源

2017-10-12 user19609

添加CSS代碼也 – Znaneswar

現在

試試這個與編輯代碼

.w3-white { 
 
    margin-top: -20px; 
 
    width: 40%; 
 
} 
 

 
.w3-container:hover img { 
 
    opacity: 0.5; 
 
} 
 

 
.w3-container:hover .w3-white { 
 
    background-color: grey; 
 
}

<div class="w3-third w3-container w3-margin-bottom"> 
 
    <a href="#" style="display:block"><img src="http://webneel.com/daily/sites/default/files/images/daily/09-2013/1-diwali-greetings.preview.jpg" style="width:40%" class="w3-hover-opacity"> 
 
    <div class="w3-container w3-white"> 
 
     <p><b>PSB2 and COM4</b></p> 
 
     <p><b>&nbsp;</b></p> 
 
    </div> 
 
    </a> 
 
</div>

來源

2017-10-12 04:49:01 Bhargav

你似乎忽略了「框變成灰色」部分 – Swellar

這盒顏色解釋更 – Bhargav

你最好問OP，不是我 – Swellar

由於您的片段是從您提供的圖片不同，我創建了一個簡單的代碼段更改圖像的不透明度並更改邊框顏色（如果那是你的意思盒）到灰色

.wrapper { 
 
    height: 200px; 
 
    width: 250px; 
 
    border: 3px solid green; 
 
} 
 
.wrapper:hover { 
 
    border: 3px solid gray; 
 
} 
 
.wrapper:hover img { 
 
    opacity: 0.5; 
 
}

<div class="wrapper"> 
 
    <a href="#"> 
 
    <img src="http://via.placeholder.com/250x150" /> 
 
    </a> 
 
</div>

來源

2017-10-12 04:58:54 Swellar

試試這個：

.w3-third { 
 
    border: 5px solid lightgreen; 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    margin: 0; 
 
} 
 

 
a { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.w3-third:hover .w3-white { 
 
    background-color: gray; 
 
} 
 

 
.w3-third:hover img { 
 
    opacity: 0.2; 
 
}

<div class="w3-third w3-container w3-margin-bottom"> 
 
    <a href="#" style="display:block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA"> 
 
    <div class="w3-container w3-white"> 
 
     <p><b>PSB2 and COM4</b></p> 
 
     <p><b>&nbsp;</b></p> 
 
    </div></a> 
 
</div>

來源

2017-10-12 05:02:25 Ehsan

試圖把你的圖像和文本放入一個容器中r並添加簡單的轉換。檢查下面的代碼段。

.img-container { 
 
    width: 250px; 
 
    border: 2px solid blue; 
 
} 
 

 
.img-container p { 
 
    padding: 10px 0; 
 
    margin:0; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.img-container img{ 
 
    transition: all 0.5s ease; 
 
} 
 

 
.img-container:hover img { 
 
    opacity: 0.5; 
 
} 
 

 
.img-container:hover p { 
 
    background-color: grey; 
 
}

<div class="img-container"> 
 
    <a href="#"> 
 
    <img src="http://via.placeholder.com/250x150" /> 
 
    <p>Some text</p> 
 
    </a> 
 
</div>

來源

2017-10-12 05:46:38

懸停框顏色和圖像不透明度

回答

相關問題