用鼠标悬停图像时如何使图像透明？答案

【问题标题】：How do you make images transparent when you hover them with your mouse?用鼠标悬停图像时如何使图像透明？
【发布时间】：2014-02-18 06:16:02
【问题描述】：

我是使用 html/css 编程的新手，我正在尝试为我的班级编写一个网站。本质上，我正在尝试制作此页面的照片：www.stanford.edu/~tayoamos 变得更加透明，并在您将它们悬停时在顶部显示另一张图像。

这是我的 html 和 css：

HTML

    <html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <title> Instalert </title>


</head>

<body>
    <div id="photos">
        <img src="http://distilleryimage10.s3.amazonaws.com/cf16c8b4865411e3ab4012f602fa8bc2_8.jpg" alt ="JB1">
        <img src ="http://distilleryimage7.s3.amazonaws.com/68042be2857511e382bb121b6297674b_8.jpg" alt="JB2">
        <img src="http://distilleryimage10.s3.amazonaws.com/9a5b791283bb11e3b33312c4f3a07952_8.jpg" alt "JB3">
        <img src="http://distilleryimage6.s3.amazonaws.com/230ce59a831a11e38fdc120c7c565106_8.jpg" alt "JB4">
        <img src="http://distilleryimage9.s3.amazonaws.com/70d891a6853211e3828f1225728e27b1_8.jpg" alt ="KK1">
        <img src="http://distilleryimage0.s3.amazonaws.com/4462c49a853011e385020e36ca40396c_8.jpg" alt "KK2">
        <img src="http://distilleryimage10.s3.amazonaws.com/80531368852811e39c3c12a357c94c82_8.jpg" alt "KK3">
        <img src="http://distilleryimage11.s3.amazonaws.com/97b2d28484bd11e3a7630e29514d93ff_8.jpg" alt "KK4">
        <img src="http://distilleryimage5.s3.amazonaws.com/e66c6606856c11e399cf1225396dfdfd_8.jpg" alt "RR1">
        <img src="http://distilleryimage3.s3.amazonaws.com/ceaedd12849211e3928a0e05f3709127_8.jpg" alt "RR2">
        <img src="http://distilleryimage11.s3.amazonaws.com/37805c6e83e211e3a1ab0af82f025223_8.jpg" alt "RR3">
        <img src="http://distilleryimage8.s3.amazonaws.com/dcda744c83d811e3bbfc122878962eb0_8.jpg" alt "RR4">
    </div>
</body>

</html>

CSS

* { margin: 0; padding: 0; }

photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }

#photos img {
  -webkit-transition: all 0,3s ease;
     -moz-transition: all 0,3s ease;
       -o-transition: all 0,3s ease;
      -ms-transition: all 0,3s ease;
          transition: all 0,3s ease;
}

 #photos:hover {
  opacity:.5;
 }



 }

}

非常感谢！！！

【问题讨论】：

如果你想显示另一个img，你需要使用javascriptjQuery。
@user3240333 ：用户参与通常是一个好兆头，说明答案是否有帮助！ :)
有趣...在我取出 css 代码的第一部分后它就可以工作了。无论如何，再次感谢！

标签： html css image hover transparent

【解决方案1】：

这样做：

img:hover{
  opacity:0.4; /* how much transparent you want image to be*/
  filter:alpha(opacity=40); /* browser fix*/
  -webkit-opacity:0.4; /*vendor prefixes for website browsers*/
  -moz-opacity:0.4; /* same as above, edited thankx to @ Daniel_Lisik  */
}

demo here

另外，您的alt 在某些img 标签中错过了=！

编辑

要在悬停在顶部图像上时显示下方的图像，您必须执行以下操作：

wrap 您希望默认显示并悬停在单个 div 中的图像对
制作图片absolute位置和容器relative。

CSS

.imgdiv, #photos {
    position:relative; /* very important */
}

/* stack images one behind other */
.imgdiv > img.top {
    position:absolute;
    z-index:10;
}
.imgdiv > img.bottom {
    position:relative;
    z-index:9;
}

/* this part css will work on hover */
.imgdiv > img.top:hover {
    cursor:pointer;
    opacity:0.1; /* make top image go invisisble  */
    filter:alpha(opacity=10);
    -webkit-opacity:0.;
    -moz-opacity:0.1;
}

see demo

【讨论】：

不要忘记-webkit-opacity:0.4; -moz-opacity:0.4; 以获得跨浏览器支持。
非常感谢！这非常有帮助。你知道我会如何在上面添加另一个图像吗？就像当您将鼠标悬停在它上面时，图像更透明，但随后又出现了另一个图像？
另外我输入了代码，它仍然无法工作......也许它与“#photos”语法或其他什么有关？
@user3240333 ：添加了编辑答案...请检查！！
@user3240333 : 很高兴我能帮上忙....您会将答案标记为已接受，以便可以将问题视为已关闭？ :)

【解决方案2】：

带有css过渡效果的不透明度

http://jsfiddle.net/ByBtt/

img {
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}

img:hover{
opacity: 0.5; 
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}

【讨论】：

【解决方案3】：

虽然这不是我的专业领域，但我找到了一些您可能想要查看的资源（如果您还没有的话）：

http://www.w3schools.com/css/css_image_transparency.asp

http://themes.themaxdavis.com/tutorial/transparent_images

这两个都包含一些易于理解的示例。

【讨论】：

用示例+链接发布答案总是很棒的，以获取更多信息。 w3fools.com 我们开始 ;)

【解决方案4】：

Opacity 属性不适用于 ie8 并使用 filter:alpha(opacity=40) 使图像透明

【讨论】：