html - CSS 图像悬停效果未按预期工作

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/