ホバー上の画像上に中央のテキストが表示される

さまざまなブラウザサイズのセクションの「ラベル」にテキストが表示されることがあります。 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>
これには、

出典

2016-04-06 02:39:09 Manish62

私は助けに感謝します！私はそれを試みたが、私はまだ問題に遭遇している。私は、私が話していることを示すオリジナルの投稿へのリンクを追加しました。 –

あなたのテキストは位置にある小型デバイスのためのセンターでそれを整列するために、それはtext-align:centerスタイリング与えるも、助けるべきである：それが表示されたら、絶対にそれ以下のコンテンツをプッシュしません。視認性の代わりに、表示値を変更して相対位置に変更し、画像位置を絶対位置に変更する必要があります。テキストを表示させると、その下にコンテンツが投稿されます。ここで

が荒い例である：

.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

ホバー上の画像上に中央のテキストが表示される

答えて

関連する問題