将文字悬停在图片上

文字有时会溢出各种浏览器尺寸的部分的“标签”。 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.

来源

2016-04-06 Jess Williams

是的，问题是在小设备 – Manish62

您的问题将通过引导来解决，只是为了悬停的每个图像和文字，给
<div class="row"> <div class="col-xs-12">  </div> </div>
这应该可以帮助，也给它的造型text-align:center，所以在中心对齐它为小型设备

来源

2016-04-06 02:39:09 Manish62

我欣赏帮助！我尝试过，但我仍然遇到这个问题。我添加了原始帖子的链接，显示了我正在谈论的内容。 –

您的文字在的位置是：绝对不压在它下面的内容出现时。而不是它的可见性，您应该更改它的显示值，更改为相对位置，并使图像位置：绝对。当你让文本出现时，它应该发布下面的内容。

这里是一个粗略的例子：

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

来源

2016-04-07 02:42:13

感谢您的意见。实际上，我并没有试图获取图片下面的文字 - 我只是希望它将图片放在中心位置，而现在它正在服务描述中流血。 –

尽管您在小屏幕中显示的文字太长。您是否在简单地调整小屏幕上的文字大小？ –

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

检查了这一点，现在，这为u想要什么，你可以通过改变宽度来调整悬停时的文字宽度。

来源

2016-04-07 02:49:53 Manish62

将文字悬停在图片上

回答

相关问题