Question

尝试在图片上实现悬停超过标题，其中不透明的叠加层显示单词但有一点麻烦。

我的代码如下：

<style type="text/css">
  a.hovertext {
    position: relative;
    width: 220px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext:after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    bottom: 5px;
    padding: 0em 0px;
    width: 220px;
    height: 220px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }
</style>

<a class="hovertext" data-title="Europe 2014" href="URL"><img alt="" border="0" src="URL" height="220" width="220" /></a>

这个想法是我想要的，但我无法弄清楚如何将文本垂直移动到框的中间，以便它完全居中，以及如何更改字体的大小和样式。

有什么想法吗？我确信这是一个简单的修改，但我不是很擅长HTML。

Answer 1

您可以使用此功能来实现目标，而不是使用line-height：

display: -webkit-box; /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */
display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

-webkit-box-align: center; 
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;

justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

更新了font-size和font-family：http://jsfiddle.net/Q6jLX/2/（已更新为与IE10兼容-ms-flexbox）

我添加了这个：

a.hovertext:after {
    .......
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
    .......
}

并导入了谷歌字体：<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

我的提示是下载您需要的字体，然后使用它。

-----------没有FLEX和LINE-HEIGHT ------------

我不知道您是使用插件还是自己编码所有内容，如果data-title不是强制性的，则此处采用另一种方法：http://jsfiddle.net/Q6jLX/3/

display: table-cell兼容性：http://www.browsersupport.net/CSS/display:table-cell

Answer 2

以下是您的示例的修订代码。检查a.hovertext：在我添加line-height之后

  a.hovertext {
    position: relative;
    width: 220px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext:after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    bottom: 5px;
    padding: 0em 0px;
    width: 220px;
    height: 220px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    line-height: 220px;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }

Answer 3

将line-height添加到以下类：

a.hovertext {
    position: relative;
    width: 220px;
    text-decoration: none !important;
    text-align: center;
    line-height: 220px;
  }

fiddle

另外，对于尺寸，您可以使用font-size，对于字体样式，您可以font-family使用以下示例：

example with font size and font family

Answer 4

这也可以 - 添加填充：

<style type="text/css">
  a.hovertext {
    position: relative;
    width: 220px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext:after {
content: attr(data-title);
position: absolute;
left: 0;
/* bottom: 5px; */
padding: 102px 70px;
/* width: 220px; */
/* height: 220px; */
background: rgba(0,0,0,0.8);
text-decoration: none !important;
color: #fff;
opacity: 0;
vertical-align: middle;
line-height: 100%;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }
</style>

Answer 5

澄清：要垂直居中，您应该为div赋予line-height和height

  a.hovertext:after {
            height: 220px;
            line-height: 220px;
        }

这是一个跨浏览器的解决方案。

2.要更改字体大小，您应更改font-size或font-weight或font-style的值（例如font-size:25px; font-weight:bold; font-style:italic）有关文档，请参阅here

在html的框中移动文本的位置

5 个答案: