將文字懸停在圖片上

文字有時會溢出各種瀏覽器尺寸的部分的「標籤」。 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

將文字懸停在圖片上

回答

相關問題