悬停CSS3阴影变暗 [英] On Hover CSS3 Shadow Gets Darker

问题描述

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

http：/

p $ p> < section id =top-containerclass =top-columnstyle =width：1050px; height：400px;>
< div class =imagestyle =float：left;>
< img src =http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpgborder =0;宽度= 263; height =200style =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 =imagestyle =float：left;>
< img src =http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpgborder =0;宽度= 262; height =200style =display：block; border-top：1px solid #dddddd; border-bottom：1px solid #dddddd;>
< h4 style =font-size：30px; top：90px;>孟加拉虎< / h4>
< / div>
< / section>


CSS

  .image {
 position：relative; 
} 
 
 h4 {
 position：absolute; 
宽度：100％; 
颜色：#fff; 
 float：left; 
位置：绝对; 
 font-size：40px; 
 font-family：Oswald; 
 text-align：center; 
最大高度：自动; 
 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：之前{
 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; 
位置：绝对; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 z-index：20; 
光标：指针; 
 
  

解决方案

添加转换到：在伪元素之前。

  .image：在{
 transition：all 1s; 
 -webkit-transition：all 1s; 
 -moz-transition：全1s; 
} 
  

更改伪元素的 box-shadow hover .image 元素。

  .image：hover：之前{
 box-shadow：0 0 100px 30px＃000 inset; 
} 
  

这是 更新示例 。

I have added an overlay of shadow on my images but I want the shadow to get darker when I hover the image. I tried a bunch of different things but I couldn't get it to work properly and it would shift the pictures all over the place when you would hover. This is what I have so far.

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

解决方案

Add a transition to the :before pseudo element.

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

Change the pseudo element's box-shadow on hover of the .image element.

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

Here is the updated example.

这篇关于悬停CSS3阴影变暗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！