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技术创建图像到文本转换的视觉效果。

在这种情况下，您可以看到已经使用了两个背景图像并且它们会更改：将鼠标悬停在链接标记上。

您也可以注意到，为了使链接的“关于”文字消失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源。

Answer 2

如果你想要相同的效果，我认为你的问题将会消失，两个按钮图像具有相同的宽度和高度。

示例：

在HTML中：

<div id="button">
   <img  src="image.png" />
   <img class="over" src="image2.png" />
</div>

在CSS中：

#button{
 position:relative;
 height:100px;
 width:100px;
}

#button img {
 position:absolute;
 left:0;
 transition: opacity 0.5s ease-in-out;
}

 #button img.over:hover {
 opacity:0;
}

文字为image.png。希望它有所帮助。

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

2 个答案: