懸停CSS3陰影變暗

我在圖像上添加了陰影疊加層，但是當我將圖像懸停時，我希望陰影變暗。我嘗試了一堆不同的東西，但是我無法讓它正常工作，並且當您懸停時它會將照片轉移到整個地方。這是我迄今爲止所擁有的。懸停CSS3陰影變暗

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

來源

2013-09-29 John

是否有一個特定的原因，你需要從所有的問題中刪除jsFiddle鏈接？您在第一次回覆您的更改後第二次完成此操作。 – BoltClock

添加transition到:before僞元素。

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

改變僞元素的.image件hover的box-shadow。

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

這裏是updated example。

來源

2013-09-29 05:52:30

如果我在以下位置添加：hover之前：如果您沒有懸停在圖像上，將刪除圖像上的陰影。我想讓那個小陰影留在那裏，當你將鼠標懸停在圖像上時，它會使陰影變得更暗。所以基本上我想讓那個小陰影留下來，即使你沒有在圖像上徘徊。 – John

@CusaJohn好吧 - 被誤解了。我以爲你想讓它在懸停狀態下顯示。 –

是否這樣？ http://jsfiddle.net/Qf4Ka/10/ @CusaJohn –

懸停CSS3陰影變暗

回答

相關問題