0

背景を暗くし、テキストを上に表示する画像上でのマウスオーバーの効果を達成しようとしています。

次に、マウスオーバーしたときに一元化された素敵なテキストが必要でした。

これらの両方が達成されましたが、その後、2 つの小さな問題に遭遇しました。

  • 画像の背景を暗くしたときに、上のテキストを暗くしないようにするにはどうすればよいですか
  • 画像の幅と高さを指定せずにテキストを中央に配置するにはどうすればよいですか (レスポンシブ デザインを有効にするため)

HTML

<div id="bottomWide">            
    <ul>
       <li class="first">
            <img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt=""> 
            <div class="all-canvas">
                <div class="all-text">
                    <span class="title">A Heading</span><br>
                    <span class="text">Couples of Lines of Text will come here</span><br>
                    <span class="shop">See Details.</span>
                </div>
            </div>
        </li>
        <li class="second">
            <img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
                 <div class="all-canvas">
                <div class="all-text">
                    Some text here, style as needed
                </div>
            </div>
        </li>

    </ul> 
</div>

CSS

#bottomWide{
    width:100%;
    margin:0 auto;


}

#bottomWide ul{
    margin:0;
    padding:0;

}
#bottomWide li{
  list-style-type: none;
  display: inline-block;
    width:50%;
    text-align:justify;
    float: left;


     /* For Mouse Over*/
    position: relative;
    display: inline-block;
}
#bottomWide li:last-child img { 
   border-left: 4px solid #fff;
}
#bottomWide img{
    width:100%;
}



#bottomWide li div.all-canvas{
    position: absolute;
    top: 0;
    left: 0;
    /* 100% will equal the dimensions of the image, as nothing else will be inside the .container */
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: #000;
    opacity: 0;
    /* This will create the fade effect */
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    /* Include all required vendor prefixes for opacity and transition */

    margin: 0 auto;
}
#bottomWide li:last-child div.all-canvas {
    margin-left: 4px;
}



#bottomWide li div.all-canvas:hover {
    opacity: 0.7;
}

#bottomWide li:last-child div.all-canvas:hover {
    opacity: 0.7;
    margin-left: 4px;
}

div.all-text {
    height:358px; /* This is what I want to change to %*/
    width: 623px; /* This is what I want to change to %*/ 
    text-align:center;
    border:1px solid silver;
    display: table-cell; 
    vertical-align:middle;
    margin: 0 auto; 
}

div.all-text span.title { padding: 3px; font: 18px/1.35 "Open Sans", Helvetica, sans-serif; text-transform: uppercase;}

出力は次のようになります。

ここに画像の説明を入力 (画像の上にぼんやりとしたテキストがあることに注意してください。しっかりしたものにすることを望んでいます) ありがとうございます。

4

1 に答える 1

2

要素に不透明度を設定すると、すべての子 (テキストを含む) にも不透明度が設定されます。rgba を使用して背景色を変更してみてください。

#bottomWide li div.all-canvas:hover {
    background-color: rgba(0,0,0, 0.7);
}

不透明度を 0 から 1 に切り替えて表示できるようにする必要がありますが、背景色は透明にする必要があります。

テキストをレスポンシブにしようとしているため、テキストを中央に配置するのは非常に難しくなります。テキストの高さは固定されていないため、おそらく Javascript を使用して計算する必要があります。次の CSS から始めることができます。

.theText {
    position: absolute;
    top: 50%;
    margin-top: -20px; // Should be half of the element height
}

javascript を使用して .theText の高さを測定し、それに応じて負の margin-top を設定する必要があります...

于 2013-07-28T20:26:24.877 に答える