インラインCSS：誤っ

を表示する画像は、私は、カップルは、以下のCSSのインラインコードを編集しようとしていますが、問題に実行しています：私は青いホバーオーバーレイの不透明度を希望インラインCSS：誤っ

50％ですので、その背後にある画像の一部を見ることができます。
ホバーオーバーレイ内のテキストを右揃えにしたいと思います。
私は画像をお互いに積み重ねたくないです。私はインラインブロックを使用しようとしたが、それは動作していないようだ。私は最初の3つの画像を上、中央、および他の2つの画像がそのラインの下に均等に広げ、均等に、中央に広げたいと思います。ボウリングのピンのように。

 .container { 
 
      position: relative; 
 
      width: 15%; 
 
     } 
 
     
 
     .image { 
 
      display: inline-block; 
 
      width: 100%; 
 
      height: auto; 
 
      float: middle; 
 
     } 
 
     
 
     .overlay { 
 
      position: absolute; 
 
      bottom: 0; 
 
      left: 0; 
 
      right: 0; 
 
      background-color: #7aa9bd; 
 
      overflow: hidden; 
 
      width: 100%; 
 
      height: 0; 
 
      transition: .5s ease; 
 
     } 
 
     
 
     .container:hover .overlay { 
 
      height: 25px; 
 
     
 
     } 
 
       
 
     .text { 
 
      font-family: "Verdana"; 
 
      white-space: nowrap; 
 
      color: white; 
 
      font-size: 12px; 
 
      position: absolute; 
 
      overflow: hidden; 
 
      top: 50%; 
 
      left: 50%; 
 
      transform: translate(-50%, -50%); 
 
      -ms-transform: translate(-50%, -50%); 
 
     }

<!DOCTYPE html> 
 
     <html> 
 
     <head> 
 

 
     </head> 
 
     <body> 
 

 
       <center><font size="5" font face="verdana" color="black">Working to support you:</font></center> 
 
     
 
     <div class="container"> 
 
      <img src="image1.png" alt="1" class="image"> 
 
      <div class="overlay"> 
 
      <div class="text"> 
 
       <strong>Sweep Up Text</strong> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     
 
     <div class="container"> 
 
      <img src="image2.png" alt="2" class="image"> 
 
      <div class="overlay"> 
 
      <div class="text"> 
 
       <strong>Sweep Up Text</strong> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="container"> 
 
      <img src="image3.png" alt="3" class="image"> 
 
      <div class="overlay"> 
 
      <div class="text"> 
 
       <strong>Sweep Up Text</strong> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="container"> 
 
      <img src="image4.png" alt="4" class="image"> 
 
      <div class="overlay"> 
 
      <div class="text"> 
 
       <strong>Sweep Up Text</strong> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="container"> 
 
      <img src="image5.png" alt="5" class="image"> 
 
      <div class="overlay"> 
 
      <div class="text"> 
 
       <strong>Sweep Up Text</strong> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     </body> 
 
     </html>

出典

2017-03-22 M.C. Fav

あなたが達成したいものを画像なしで視覚化するために、そのハード –

1行のスタッキングは、コンテナの幅に依存し、それらのすべての合計は、文書の幅よりも大きい場合します。

.container { 
 
    position: relative; 
 
    width: 25%; 
 
    display: inline-block; 
 
} 
 

 
.image { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: auto; 
 
    float: middle; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    /* background-color: #7aa9bd; */ 
 
    background-color: rgba(122, 169, 189, 0.5); 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 

 
.container:hover .overlay { 
 
    height: 25px; 
 

 
} 
 

 
.text { 
 
    font-family: "Verdana"; 
 
    white-space: nowrap; 
 
    color: white; 
 
    font-size: 12px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
}

<center> 
 
    <font size="5" font face="verdana" color="black">Working to support you:</font> 
 
</center> 
 

 
<div class="container"> 
 
    <img src="http://placehold.it/350x150" alt="1" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text"> 
 
     <strong>Sweep Up Text</strong> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="container"> 
 
    <img src="http://placehold.it/350x150" alt="2" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text"> 
 
     <strong>Sweep Up Text</strong> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="http://placehold.it/350x150" alt="3" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text"> 
 
     <strong>Sweep Up Text</strong> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="http://placehold.it/350x150" alt="4" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text"> 
 
     <strong>Sweep Up Text</strong> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="http://placehold.it/350x150" alt="5" class="image"> 
 
    <div class="overlay"> 
 
    <div class="text"> 
 
     <strong>Sweep Up Text</strong> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-03-22 16:44:27

不透明度はCSSでopacityプロパティで制御することができます。オーバーレイを再加工して、高さの代わりにトランスフォームをトランジションし（よりパフォーマンスがよい）、テキストを右揃えにします。次に、display: flex; justify-content: center;を使用して行を作成し、画像を中央に配置します。また、あなたのcenterとfontタグはhtml5で非推奨になりました。あなたはそれらをもう使用しないでください。私が使用した要素を自由に変更してください。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .row { 
 
     display: flex; 
 
     justify-content: center; 
 
    } 
 
    .container { 
 
     position: relative; 
 
     width: 15%; 
 
     overflow: hidden; 
 
    } 
 
    
 
    .image { 
 
     display: block; 
 
     width: 100%; 
 
     height: auto; 
 
    } 
 
    
 
    .overlay { 
 
     position: absolute; 
 
     bottom: 0; 
 
     left: 0; 
 
     right: 0; 
 
     background-color: #7aa9bd; 
 
     width: 100%; 
 
     transform: translateY(100%); 
 
     transition: .5s ease; 
 
     opacity: .5; 
 
     text-align: right; 
 
    } 
 
    
 
    .container:hover .overlay { 
 
     transform: translateY(0); 
 
    } 
 
    
 
    .text { 
 
     font-family: "Verdana"; 
 
     white-space: nowrap; 
 
     color: white; 
 
     font-size: 12px; 
 
     padding: .5em .25em; 
 
    } 
 
    header { 
 
     text-align: center; 
 
     font-family: verdana, sans-serif; 
 
     color: black; 
 
    } 
 
    header h1 { 
 
     font-weight: normal; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <h1>Working to support you:</h1> 
 
    </header> 
 

 
    <main> 
 

 
    <div class="row"> 
 

 
     <div class="container"> 
 
     <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="1" class="image"> 
 
     <div class="overlay"> 
 
      <div class="text"> 
 
      <strong>Sweep Up Text</strong> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 

 
     <div class="container"> 
 
     <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="2" class="image"> 
 
     <div class="overlay"> 
 
      <div class="text"> 
 
      <strong>Sweep Up Text</strong> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="container"> 
 
     <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="3" class="image"> 
 
     <div class="overlay"> 
 
      <div class="text"> 
 
      <strong>Sweep Up Text</strong> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    <div class="row"> 
 

 
     <div class="container"> 
 
     <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="4" class="image"> 
 
     <div class="overlay"> 
 
      <div class="text"> 
 
      <strong>Sweep Up Text</strong> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="container"> 
 
     <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="5" class="image"> 
 
     <div class="overlay"> 
 
      <div class="text"> 
 
      <strong>Sweep Up Text</strong> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    </main> 
 

 
</body> 
 

 
</html>

出典

2017-03-22 16:47:57

答えて

関連する問題