悬停框颜色和图像不透明度

我有一个图像和文本下面它包裹在一个“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

悬停框颜色和图像不透明度

回答

相关问题