图像上的黑色透明叠加层
Black transparent overlay on image
当您将鼠标悬停在图像上时(如文本),我正在尝试在图像上叠加浅黑色(如文本)抱歉,我是 css 和 HTML 的新手!
不胜感激
HTML
<div id="con">
<div id="box1">
<p id="text1">
<a href="url">DESTINATIONS</a>
</p>
</p>
<p id="text2">
AMALFI<BR>SORRENTO<BR>POSITANO</a>
</p>
<p id="text3">
<a href="url">THINGS TO DO</a>
</p>
</p>
<p id="text4">
TOURS<BR>MUSUEMS<BR>SHOPPING</a>
</p>
</div>
css
#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float: left;
font-size: 25px;
width: 388px;
height: 477px;
background-image: url(media/trying1.png);
background-size: cover;
margin-left: 120px;
margin-top: 90px;
}
#text1 {
z-index:100;
color:white;
font-size:30px;
text-align: center;
margin-top:80px;
line-height:55px;
opacity: 0;
transition: all 0.5s;
}
#box1:hover #text1 {
opacity: 1;
}
这可以通过 :before 或 :after
#box1{
position:relative;
}
#box1:before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:black;
opacity:0;
z-index:0;
}
#box1:hover:before{
opacity:.6;
transition: all 0.5s;
}
#box1 > *{
position:relative;
z-index:1;
}
CS3 很棒!您不再需要 JS 来实现简单的翻转效果。 Gopalraju 的上述代码应该可以工作,下面的示例也是如此。您可以使用 fiddle 并根据需要使用代码。
父级 div 具有黑色页面背景,imgdiv 将鼠标在 div 上滚动时将其中的所有内容更改为 50% 的不透明度。在这种情况下,图像位于 div.
内
有几种方法可以做到这一点。这只是另一个要加入其中的广告。祝你好运。
.parentdiv {
background-color:#000;
height:100%;
width:100%;
}
.imgdiv {
padding:30px;
}
.imgdiv a{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.5s linear;
}
.imgdiv a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.5s linear;
}
<div class="parentdiv">
<div class="imgdiv">
<a href="http://www.domain.com.au/link.html">
<img src="http://placehold.it/350x150" alt="image" height="150" width="350">
</a>
</div>
</div>
当您将鼠标悬停在图像上时(如文本),我正在尝试在图像上叠加浅黑色(如文本)抱歉,我是 css 和 HTML 的新手!
不胜感激
HTML
<div id="con">
<div id="box1">
<p id="text1">
<a href="url">DESTINATIONS</a>
</p>
</p>
<p id="text2">
AMALFI<BR>SORRENTO<BR>POSITANO</a>
</p>
<p id="text3">
<a href="url">THINGS TO DO</a>
</p>
</p>
<p id="text4">
TOURS<BR>MUSUEMS<BR>SHOPPING</a>
</p>
</div>
css
#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float: left;
font-size: 25px;
width: 388px;
height: 477px;
background-image: url(media/trying1.png);
background-size: cover;
margin-left: 120px;
margin-top: 90px;
}
#text1 {
z-index:100;
color:white;
font-size:30px;
text-align: center;
margin-top:80px;
line-height:55px;
opacity: 0;
transition: all 0.5s;
}
#box1:hover #text1 {
opacity: 1;
}
这可以通过 :before 或 :after
#box1{
position:relative;
}
#box1:before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:black;
opacity:0;
z-index:0;
}
#box1:hover:before{
opacity:.6;
transition: all 0.5s;
}
#box1 > *{
position:relative;
z-index:1;
}
CS3 很棒!您不再需要 JS 来实现简单的翻转效果。 Gopalraju 的上述代码应该可以工作,下面的示例也是如此。您可以使用 fiddle 并根据需要使用代码。
父级 div 具有黑色页面背景,imgdiv 将鼠标在 div 上滚动时将其中的所有内容更改为 50% 的不透明度。在这种情况下,图像位于 div.
内有几种方法可以做到这一点。这只是另一个要加入其中的广告。祝你好运。
.parentdiv {
background-color:#000;
height:100%;
width:100%;
}
.imgdiv {
padding:30px;
}
.imgdiv a{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.5s linear;
}
.imgdiv a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.5s linear;
}
<div class="parentdiv">
<div class="imgdiv">
<a href="http://www.domain.com.au/link.html">
<img src="http://placehold.it/350x150" alt="image" height="150" width="350">
</a>
</div>
</div>