悬停时在图像上居中文本答案

【问题标题】：Center text over image on hover悬停时在图像上居中文本
【发布时间】：2016-04-07 10:52:41
【问题描述】：

文本有时会溢出具有各种浏览器大小的部分的“标签”。 Here 是网站的链接。

这是代码的摘录 -

HTML -

<div class="col-xs-12 col-md-4">
            <div class="imgwrap">
                <div class="service smooth">
                    <img src="https://s3.amazonaws.com/mrmerch.com/images/Apparel.svg" class="img-responsive" alt="Printed merchandise"><p class="imgdescription">Sample image description.</p>                        
                </div>
                </div>
                <h4>Printed Apparel</h4>
            </div>

悬停的 CSS -

.imgdescription {
  position: absolute;
  top: 20%;
  bottom: 50%;
  left: 7%;
  right: 7%;
  background: transparent;
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /*remove comment if you want a gradual transition between states
  -webkit-transition: visibility opacity 0.2s;
  */
}

.imgwrap:hover img{
    transition: all .5s ease-in;
    transition: all .5s ease-out;
    transform:scale(.95);
    opacity: .05;
}

.imgwrap:hover .imgdescription {
  visibility: visible;
  opacity: 1;
  transition: opacity .5s ease-in;
  transition: opacity .5s ease-out;
  font-size: 1.2em;
  color: #000;
  font-family: interstate-light,Helvetica, highway_gothic_wideregular, Arial, sans-serif;
}

Here is an example of what I'm seeing.

【问题讨论】：

是的，问题出在小型设备上

标签： html css hover

【解决方案1】：

Bootstrap 将解决您的问题，仅针对悬停时的每个图像和文本，给
<div class="row"> <div class="col-xs-12">  </div> </div>
这应该会有所帮助，还可以为其设置样式 text-align:center，以便将其对齐在小型设备的中心

【讨论】：

感谢您的帮助！我试过了，但我仍然遇到这个问题。我添加了指向原始帖子的链接，显示了我在说什么。

【解决方案2】：

您的文本在 position: absolute 出现时不会将其下方的内容推送。您应该更改其上的显示值，而不是其可见性，将位置更改为相对，并使图像位置：绝对。当您使文本出现时，它应该在其下方发布内容。

这是一个粗略的例子：

.service {min-height: 100px; position: relative;}
.imgwrap .img {position: absolute; top: 0;}
.service p {display: none;}

.imgwrap:hover img{
  position: absolute;
    transition: all .5s ease-in;
    transition: all .5s ease-out;
    transform:scale(.95);
    opacity: .05;
}

.imgwrap:hover .imgdescription {
  display: block;
  opacity: 1;
  transition: display .5s ease-in;
  transition: display .5s ease-out;
  font-size: 1.2em;
  color: #000;
  font-family: interstate-light,Helvetica, highway_gothic_wideregular, Arial, sans-serif;
}

你可以在那里看到它： https://jsfiddle.net/yjzpw0pa/

【讨论】：

感谢您的意见。我实际上并没有试图获取图像下方的文本 - 我只是希望它位于图像的中心，而现在它正在服务描述上流血。
您的文字太长，无法在小屏幕上显示。您是否只想在小屏幕上调整文本大小？

【解决方案3】：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  .imgdescription {
  position: absolute;
  top: 20%;
  bottom: 50%;
  left: 7%;
  right: 7%;
  background: transparent;
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /*remove comment if you want a gradual transition between states
  -webkit-transition: visibility opacity 0.2s;
  */
}

.imgwrap:hover img{
    transition: all .5s ease-in;
    transition: all .5s ease-out;
    transform:scale(.95);
    opacity: .05;
}

.imgwrap:hover .imgdescription {
  visibility: visible;
  opacity: 1;
  transition: opacity .5s ease-in;
  transition: opacity .5s ease-out;
  font-size: 1.2em;
  color: #000;
  font-family: interstate-light,Helvetica, highway_gothic_wideregular, Arial, sans-serif;
}
  </style>
</head>
<body>

The text will sometimes spill over the "label" for the sections with various browser sizes. Here is the link for the site.

And here is an excerpt from the code -

HTML -
<div style="width:90%;text-align:center;margin: 0 auto" class="row">
<div class="col-xs-12 col-md-4">
            <div class="imgwrap">
                <div class="service smooth">
                    <img style="margin: 0 auto" src="https://s3.amazonaws.com/mrmerch.com/images/Apparel.svg" class="img-responsive" alt="Printed merchandise">
                  
          <p style="width:98%;text-align:center" class="imgdescription">We source a wide variety of high-quality blanks and print using a combination of modern machinery and human perfectionism.</p>                      
                </div>
                </div>
                <h4>Printed Apparel</h4>
            </div>
  </div>
</body>
</html>

现在检查一下，这就是你想要的，你可以通过改变宽度来调整悬停时文本的宽度。

【讨论】：