Question

对于具有各种浏览器大小的部分，文本有时会溢出“标签”。 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.

Answer 1

您的问题将通过Bootstrap解决，仅针对悬停时的每个图像和文本，给予 name
这应该有所帮助，也可以给它设置样式<div class="row"> <div class="col-xs-12">  </div> </div>，以便将它对齐小型设备的中心

Answer 2

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

这是一个粗略的例子：

.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/

Answer 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>

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

中心文本在悬停的图像上

3 个答案: