html - 在悬停时创建图像到文本的效果

Question

我想创建类似 THIS 的翻转效果

到目前为止，我的代码是这样的-

<ul>
<li> <a href="#" class="linkWrapper">
   <span class="text">
   <font size = "+3" face="Arial">Hello</font>
   </span>
   <img src="images/icons/64x64/alert.png" class = "hoverEff"/>
   </a>

</li>

CSS 是

    .hoverEff:hover
    {
        opacity: 0.05;
        transition: 0.5s;
    }

    .linkWrapper {
        position: relative;
        padding: 0;
        width:35%;
        display:block;
    }

    .text {
        position: absolute;
        top: 0;
        color:#f00;
        background-color:rgba(255,255,255,1);
        width: 95%;
        height: 99%;
        line-height:100px;
        text-align: center;
        z-index: 10;
        opacity: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .text:hover {
        opacity:1;
    }

这不是特别有用!结果只是一个覆盖图像的破旧框，但当背景不是白色时绝对会失败。由于我必须将这个测试网站提交给我的教授，所以我想要最有效的方法!

我的问题是 - 我提到的网站“scrolls-akgec.com”具有不同的纹理背景，但在没有使用我尝试过的方法的情况下设法做到了同样的效果。怎么办？

Answer 1

您可以使用浏览器检查器了解使用了哪种 CSS 技术来创建这种图像到文本转换的视觉效果。

在这种情况下，您可以看到使用了两个背景图像，并且它们在 :hover 在链接标记上发生变化。

您还可以注意到，为了使链接的“关于”文本消失，text-indent:-9999px; 已被使用。

刚刚创建了一个演示:http://jsfiddle.net/a_incarnati/trq9Lu2d/

.about a{width:200px;height:200px;background-color:grey; display:block;text-indent:-9999px;}

.about a:hover {
background: url("http://scrolls-akgec.com/img/rulesh.png") no-repeat;
}

.about a {
background: url("http://scrolls-akgec.com/img/rules.png") no-repeat;
-webkit-transition: linear .3s;
-moz-transition: linear .3s;
-o-transition: linear .3s;
-ms-transition: linear .3s;
transition: linear .3s;
}

如果你想用 img 标签来做，那么你需要使用 JS 来更改 img 源。