2013-09-29 155 views
2

我在图像上添加了阴影叠加层,但是当我将图像悬停时,我希望阴影变暗。我尝试了一堆不同的东西,但是我无法让它正常工作,并且当您悬停时它会将照片转移到整个地方。这是我迄今为止所拥有的。悬停CSS3阴影变暗

http://jsfiddle.net/Qf4Ka/6/

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; 
} 
+2

是否有一个特定的原因,你需要从所有的问题中删除jsFiddle链接?您在第一次回复您的更改后第二次完成此操作。 – BoltClock

回答

2

添加transition:before伪元素。

.image:before { 
    transition: all 1s; 
    -webkit-transition: all 1s; 
    -moz-transition:all 1s; 
} 

改变伪元素的.imagehoverbox-shadow

.image:hover:before { 
    box-shadow:0 0 100px 30px #000 inset; 
} 

这里是updated example

+0

如果我在以下位置添加:hover之前:如果您没有悬停在图像上,将删除图像上的阴影。我想让那个小阴影留在那里,当你将鼠标悬停在图像上时,它会使阴影变得更暗。所以基本上我想让那个小阴影留下来,即使你没有在图像上徘徊。 – John

+0

@CusaJohn好吧 - 被误解了。我以为你想让它在悬停状态下显示。 –

+1

是否这样? http://jsfiddle.net/Qf4Ka/10/ @CusaJohn –