html - 如何使用悬停叠加图像格式化文本

标签 html css hover

我有以下代码,目标是显示一个名字,而不是将鼠标悬停在形状的中心,然后在悬停后有一个 5 行的生物全部居中,换行符之间的间距最小。

目前我的代码中的问题是将正面格式化为全部居中并具有与悬停后相同的大字体,甚至更明显的错误 - 背面的信息从形状的末端脱落.不居中。

<html>

<div id="box">
  John Doe

  <div id="overlay">
    <span id="plus">Title:<br>DOB:<br>Hometown:<br>Info4:<br>Info5:</span>
  </div>

</div>

<style>

body {
  background: -1;
}

#box {
  width: 300px;
  height: 200px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;

  /* NEW */
  line-height: 200px;
  text-align: center;
  position: relative;
}

#overlay {
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;

  /* NEW */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

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

#plus {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
}


</style>
</html>

最佳答案

这不是您所有问题的答案,但要使字体样式相同,请将您为#plus 设置的字体样式添加到#box 选择器。您必须将框选择器的颜色更改为黑色,对于#plus,您可以保留当前的颜色。

关于html - 如何使用悬停叠加图像格式化文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51228170/

相关文章:

php - NextGEN Gallery 模板加载页面两次。?

html - smarty tpl 文件没有正确读取 tpl 文件

jquery - 全屏时 HTML 控件自动出现

jquery - 使用单击功能禁用 jquery 悬停功能

html - 悬停时的过渡效果

html - 将在我的网站上多次出现的单词加粗的最简单方法是什么?

php - 文件上传在 wamp 服务器上不起作用?

jquery - 使用 jquery append 时单选按钮不起作用

javascript - 如何在Jquery中为同一类的不同div中的特定元素添加悬停效果?

html - 除非内联,否则不应用样式表属性