悬停效果在图像下

Question

所以我正在努力摆脱悬停效应。黑盒子是图像，我希望每当用户将鼠标悬停在该图像上时，将红色遮罩颜色（具有相同的宽度和高度）放置在黑匣子前面，我不能这样做，因为它似乎效果不足每当我将鼠标悬停在该图像上时的图像....

.third-effect .mask {
  opacity: 0;
  overflow: visible;
  border: 100px solid rgba(0, 0, 0, 0.7);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  width: 274px;
  height: 197px;
}
.third-effect a.info {
  position: relative;
  top: -10px;
  opacity: 0;
  -webkit-transition: opacity 0.5s 0s ease-in-out;
  -moz-transition: opacity 0.5s 0s ease-in-out;
  -o-transition: opacity 0.5s 0s ease-in-out;
  -ms-transition: opacity 0.5s 0s ease-in-out;
  transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
  opacity: 1;
  border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
  opacity: 1;
  -moz-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

<section class="module content">
  <div class="view third-effect">
    <img src="images/chronos.png" />
    <div class="mask">
      <a href="#" class="info" title="Full Image">Full Image</a> 
    </div>
  </div>
  </div>
  </div>

Answer 1

在你的CSS中，你可以使用:hover选择器在鼠标悬停时修改元素的样式。

看看这个例子，了解如何使用它。 http://jsfiddle.net/wof159fh/

Answer 2

＆＃13;

＆＃13;

.third-effect .mask {

   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   width:274px;
   height:197px;


}

.third-effect a.info {
   position:relative;
   top:-10px;
   opacity: 0;
   -webkit-transition: opacity 0.5s 0s ease-in-out;
   -moz-transition: opacity 0.5s 0s ease-in-out;
   -o-transition: opacity 0.5s 0s ease-in-out;
   -ms-transition: opacity 0.5s 0s ease-in-out;
   transition: opacity 0.5s 0s ease-in-out; }

.third-effect:hover .mask  {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);

}


.third-effect:hover a.info {
	opacity:1;
	-moz-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

＆＃13;

<section class="module content">


<div class="view third-effect">  
<img src="images/chronos.png" >
  <div class="mask">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
	
  </div>  
  </div>  
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我不确定你是否希望重叠的div可以点击或者是什么。你可以用javascript来设置东西。所以你可以为＆＃34; hover＆＃34;添加透明色。它会以某种颜色掩盖它。例如：用红色设置不透明度0.8。

还有我做的方法。 http://jsfiddle.net/kv0fsLs2/

<div id="outer">
    <div id="image"></div>
    <div id="hover"></div>
</div>

---

#image {
    background-color:red;
}
#hover {
    position:absolute;
    background-color: blue;
}
div > div {
    width: 100px;
    height: 100px;
    top: 0px;
    left: 0px;
}
#outer {
    position:relative;
    left: 250px;
    top: 250px;
}

这样你可以将点击处理程序绑定到重叠的div，如果你不想对实际的项目进行处理。

编辑：在这里你可以看到它使用不透明度.... http://jsfiddle.net/kv0fsLs2/1/所有你需要做的就是让图像在那里而不是红色背景，就像我在最简单的例子中所做的那样。

编辑2：这是另一个小提琴，实际上是使用图像：http://jsfiddle.net/kv0fsLs2/2/

Answer 4

你可以这样做

＆＃13;

＆＃13;

#image {
  background-image: url('http://lorempixel.com/400/200/');
  width: 300px;
  background-size: cover;
  height: 300px;
}
#image:hover {
  background-color: red;
  background-image: none;
}

＆＃13;

<div id="image"></div>

＆＃13;

＆＃13;

＆＃13;