我在我的图像上添加了阴影叠加,但是当我悬停图像时,我希望阴影变暗。我尝试了很多不同的东西,但是我无法让它正常工作,当你悬停时,它会将图片移动到整个地方。这是我到目前为止所做的。
HTML
<section id="top-container" class="top-column" style="width:1050px; height:400px; ">
<div class="image" style="float:left;">
<img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;">
<h4 style="font-size:30px; top: 90px; ">Nature</h4>
</div>
<div class="image" style="float:left;">
<img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; ">
<h4 style="font-size:30px; top: 90px;">Bengal Tiger</h4>
</div>
</section>
CSS
.image {
position: relative;
}
h4 {
position: absolute;
width: 100%;
color: #fff;
float: left;
position: absolute;
font-size: 40px;
font-family: "Oswald";
text-align: center;
max-height: auto;
z-index: 20;
text-shadow: 1px 1px 2px #000;
-moz-text-shadow: 1px 1px 2px #000;
-ms-text-shadow: 1px 1px 2px #000;
-o-text-shadow: 1px 1px 2px #000;
-webkit-text-shadow: 1px 1px 2px #000;
}
.image {
position: relative;
}
.image:before {
content: '';
box-shadow: 0 0 50px 4px #000 inset;
-moz-box-shadow: 0 0 50px 4px #000 inset;
-webkit-box-shadow: 0 0 50px 6px #000 inset;
float: left;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
cursor: pointer;
}
答案 0 :(得分:2)
将transition
添加到:before
伪元素。
.image:before {
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition:all 1s;
}
更改box-shadow
元素的hover
上的伪元素.image
。
.image:hover:before {
box-shadow:0 0 100px 30px #000 inset;
}