Question

我尝试在图像上设置悬停效果，但我无法正常使用。

这是我的代码：

 .grid-image:hover {
     background: url("http://i58.tinypic.com/2rw7vxx.png") no-repeat scroll center top;}

.grid-image:hover img{
     opacity: 0.8 !important;}

jsfiddle link

我想要的是悬停时雪豹图像中心的小图像是否可以在雪豹图像的前面？雪豹图像应该比这个小图像更不明显，是否可以只用css做到这一点？

有什么想法吗？

谢谢。

Answer 1

您可以使用:after创建一个伪元素，并将其置于其父级的中心。

<强> CSS

 .grid-image{
     display:block;
    height: 255px;
    width: 255px;
    opacity: 1;

    /*This is needed to allow absolute positioning of the :after pseudo-element inside*/
    position:relative; 
 }
.grid-image:hover:after{
    background: url("http://i58.tinypic.com/2rw7vxx.png") no-repeat center top; 

    /*This allows the pseudo-element to display properly*/
    display:block;
    content:'';

    /*This makes it appear at the correct size and position*/
    height: 32px;
    width: 32px;
    position:absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}

HTML （与您拥有的相同，但删除了内嵌样式）

<article class="web-img">
    <a class="grid-image" title="project" href="#">
        <img class="post" width="225" height="225" alt="#" src="http://i62.tinypic.com/rwmidf.jpg"/>
    </a>
</article>

演示：http://jsfiddle.net/hxutuv8q/3/

Answer 2

您愿意更改HTML多少？您可以将图像作为链接的背景，并将img标记作为检查。

<article class="web-img">
  <a class="grid-image" title="project" href="www.google.com">
    <img class="post" width="32" height="32" alt="#" src="http://i58.tinypic.com/2rw7vxx.png">
  </a>
</article>

<style type="text/css">
  .grid-image {
    position:relative;
    display:block;
    width:225px;
    height:225px;
    background:url("http://i62.tinypic.com/rwmidf.jpg") red;
  }
  .grid-image img{
    opacity:0;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-16px;
    margin-top:-16px;
  }
  .grid-image:hover {
    opacity:0.8;
  }
  .grid-image:hover img {
    opacity:1;
  }
</style>

http://jsfiddle.net/hxutuv8q/1/

Answer 3

使用:after pseudo-element我们可以将标记背景图片放在<img>上方悬停。

刻度线以position: absolute，top \ right \ bottom \ left: 0;和margin: auto为中心。
勾选相对于其.grid-image

position: relative

您可以使用不透明度和过渡来创建平滑的悬停不透明度变化

实施例

.grid-image {
  position: relative;
  display: inline-block;
}
.grid-image:after {
  background: url("http://i58.tinypic.com/2rw7vxx.png") no-repeat;
  content: '';
  height: 32px;
  width: 32px;
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.3s;
}
.grid-image:hover:after {
  opacity: 1;
}
.grid-image img {
  display: block;
  transition: opacity 0.3s;
}
.grid-image:hover img {
  opacity: 0.8;
}

<article class="web-img">
  <a class="grid-image" title="project" href="www.google.com">
    <img class="post" width="225" height="225" alt="#" src="http://i62.tinypic.com/rwmidf.jpg">
  </a>

</article>

CSS图像悬停效果无法按预期工作

3 个答案:

实施例