Html 使用CSS创建单词部分

我试图为一个标志创造一个特定的效果，但我真的不知道这将如何工作

这是我在photoshop中绘制的草图：

所以我的想法是-我有两个div，一个在上面，一个包含图形，一个在下面，一个包含单词。所以我想让顶部的div在悬停状态下消失，当底部的div显示出来时，我想用一个或一些东西把“word”（例如）的“ord”部分抬高一点。。我怎样才能做到这一点

不过，我不确定两个div的部分。如果有更好的方法，请分享

谢谢

检查是否适合您

HTML

---

我在这个演示中使用了两个div。请看一下

CSS代码是

.main{position:relative;}
.logo{
background:url("http://placehold.it/100x100") no-repeat; 
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
  z-index:-1;
}
.text{
color:Blue; font-size:5vh; 
position:absolute;
left:0;
top:0;
z-index:1;}

.logo:hover{ 
visibility:hidden;
opacity:0; 
transition:visibility 0.5s linear 0.5s, opacity 0.5s linear;
}

div.main:hover .text span{display:inline-block;color:red;
transform: translate(0,-10px); transition: all 0.5s ease-in-out;
}

<div class="main">
  <div class="logo"><!-- To make SEO compactable Logo Text can be type here --></div>
  <div class="text">L<span>ogo</span></div>
</div>

HTML代码是

.main{position:relative;}
.logo{
background:url("http://placehold.it/100x100") no-repeat; 
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
  z-index:-1;
}
.text{
color:Blue; font-size:5vh; 
position:absolute;
left:0;
top:0;
z-index:1;}

.logo:hover{ 
visibility:hidden;
opacity:0; 
transition:visibility 0.5s linear 0.5s, opacity 0.5s linear;
}

div.main:hover .text span{display:inline-block;color:red;
transform: translate(0,-10px); transition: all 0.5s ease-in-out;
}

<div class="main">
  <div class="logo"><!-- To make SEO compactable Logo Text can be type here --></div>
  <div class="text">L<span>ogo</span></div>
</div>

标志

使用CSS创建单词部分 使用这些代码行，您可以在HTML中希望使用的任何地方使用lift函数

.card lift--hover:hover/*提卡效果*/
{
过渡：全部。15秒轻松；
转换：translateY（-20px）；
}

你好，世界

您能在jsfiddle.net中向我们展示您的代码吗还没有代码，对不起，我稍后会回来讨论这个问题。您也可以将您的图像上传到任何图像上传站点：，等等。。。并将链接粘贴到你的问题中。刚刚做了。看一看这是可行的，但我的想法不是让文本和div的背景具有相同的颜色。我的意思是，它应该像两张卡在另一张上面，当你在上面悬停时，它会消失，然后底部以单词lift开始。Tes，这更像它。但还有一个问题——我能把单词和div包装成锚定标记，这样它就可以成为链接吗？还是这违反了w3c标准？谢谢！aa还有一件事-使用divs是最佳实践，还是有更精简的方法？@Tushar您的演示有一些小问题；在您的演示中看到当移动鼠标在框的右侧时；默认情况下，文本显示在顶部，并且您正在使用不必要的额外div。这不是required@KheemaPandey我看不到这样的问题。你能详细说明一下吗？