Hover Tiles SquareSpaceカスタムCSS

Question

私はCSSには新しく、私の四角形のサイト用のカスタムコードを書こうとしています。以下は私の現在のCSSです。私のサイトはhttp://www.sophieamberkar.com/です。私は自分のランディングページにある既存の4つのイメージタイルの上にホバータイルを作成しようとしています。現在、私はちょうど底にポップアップする小さな四角形を取得しています。 see image with blue rectangle私がしたいことは、ホバー上の画像全体を青色の矩形で覆い、小さな青い矩形で現在表示されているテキストを表示することです。

私はすでに高さと線の高さを増やしてみましたが、画像の上にではなく実際の画像よりも低くしました。どんな助けも素晴らしいだろう！

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { 
display:block; 
height: 70px; 
line-height: 70px; 
position: relative; 
top: -15px; 
text-align: center; 
font-size: 16px; 
opacity: 0; 
background-color: #1E75BB; 
margin-bottom: 0px; 
} 
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 
display: block; 
opacity: 50; 
background-color: none; 
text-align: center; 
width: 100%; 
} 

    .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 
font-family: adelle-sans; 
font-size: 25px; 
color: #fff; 
} 

Answer 1

特定のセレクタのために、次を使用してコードを交換してください：上記のコード青色の背景色の

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title{ 
display:inline-block; 
height:188px; 
position:absolute; 
top:0; 
margin-bottom:0; 
margin-top:0; 
} 

を全画像領域をカバーしますが、青色のボックス内のテキストボックスの最上部に表示されます。 HTMLを変更し、テキストを入力し、青いボックスの中央にスタイルを入れます。