Question

我想在鼠标时在图像顶部显示一个粗体标题盘旋它。这也是一个链接。

Answer 1

您可以创建在用户悬停图片时触发的叠加层。

HTML：

<div id="box">
  <div id="overlay">
    <span id="text">I'm some text</span>
  </div>
</div>

CSS：

body    {  background:#e7e7e7;}
#box    {  width:300px;
           height:200px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          border-bottom:2px solid #fff;
          border-right:2px solid #fff;
          margin:5% auto 0 auto; 
          background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/dummy.jpg);
  background-size:cover;
border-radius:5px;
overflow:hidden;}

#overlay    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:60px 0 100px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#box:hover #overlay {
               opacity:1;}

#text{
   color:rgba(255,255,255,.85);
   font-size:48px;
   }

CODEPEN DEMO

在鼠标悬停时向图像添加文本标题

1 个答案: