2つ、画像のサイズと合わせたいものがあります。
レスポンシブにしたいので画面サイズに伴って大きも変化させたいです。
bootstrapのグリッドを使ってます。
#カラーボックス
(newsBox-)1〜6まであるうち2だけが画像ではなく背景に色をつけただけのカラーボックスになってます。
2にはhtmlでstyleタグで画像のデフォルトサイズを指定してあり、双方cssは{width: 100%, height: auto}にしてるのですが2だけサイズが違います。
#:before
:beforeで画像に被せてる半透明の黒幕です。
html
1<div class="newsBox row"> 2 <div class="newsBox-1 newsB col-xs-12 col-sm-6 col-md-4"> 3 <a href=""> 4 <div class="img"> 5 <img src="img/news.kei1.jpg"> 6 <h3>FROM KEI<br>2018.10.10</h3> 7 </div> 8 <div class="text"> 9 <p>【お知らせ】インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海</p> 10 <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック!⇒</p> 11 </div> 12 </a> 13 </div> 14 <div class="newsBox-2 newsB col-xs-12 col-sm-6 col-md-4"> 15 <a href=""> 16 <div class="img-2"> 17 <div class="img-box" style="width: 500px;height: 306px"></div> 18 <h3>RESULT</h3> 19 </div> 20 <div class="text"> 21 <p>上海 ロレックス・マスターズ</p> 22 <p>準決勝ロジャー・フェデラー(スイス)</p> 23 </div> 24 </a> 25 </div> 26 <div class="newsBox-3 newsB col-xs-12 col-sm-6 col-md-4"> 27 <a href=""> 28 <div class="img"> 29 <img src="img/news.kei3.jpg"> 30 <h3>FROM KEI<br>2018.10.06</h3> 31 </div> 32 <div class="text"> 33 <p>【お知らせ】インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 34 <p>大会第6日、準決勝に勝利し、同大会で4年ぶりの決勝進出を決めた錦織選手の試合直後のインタビュー!難敵リシャール・ガスケ選手との戦いを振り返るとともに、ダブルスに出場している内山選手へエールを送りました。▶錦織圭 インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018動画をチェック!⇒</p> 35 </div> 36 </a> 37 </div> 38 <div class="newsBox-4 newsB col-xs-12 col-sm-6 col-md-4"> 39 <a href=""> 40 <div class="img"> 41 <img src="img/news.kei4.jpg"> 42 <h3>FROM KEI<br>2018.10.06</h3> 43 </div> 44 <div class="text"> 45 <p>【お知らせ】インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 46 <p>大会第5日、準々決勝に勝利し、ベスト4進出を決めた錦織選手の試合直後のインタビュー!期待の若手、ステファノス・チチパス選手をストレートで下した、「いいテニスができていた」戦いを振り返りました。▶錦織圭 インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 47 </div> 48 </a> 49 </div> 50 <div class="newsBox-5 newsB col-xs-12 col-sm-6 col-md-4"> 51 <a href=""> 52 <div class="img"> 53 <img src="img/news.kei5.jpg"> 54 <h3>FROM KEI<br>2018.10.04</h3> 55 </div> 56 <div class="text"> 57 <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p> 58 <p>大会第3日、2回戦に勝利した錦織選手の試合直後のインタビュー!「出だしはむちゃくちゃ良かった」というブノワ・ペール選手との戦いを振り返りました。▶錦織圭 インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 59 </div> 60 </a> 61 </div> 62 <div class="newsBox-6 newsB col-xs-12 col-sm-6 col-md-4"> 63 <a href=""> 64 <div class="img"> 65 <img src="img/news.kei6.jpg"> 66 <h3>FROM KEI<br>2018.10.02</h3> 67 </div> 68 <div class="text"> 69 <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p> 70 <p>大会第1日、1回戦に勝利した錦織選手の試合直後のインタビュー!杉田祐一選手との戦いを振り返りました。▶錦織圭 インタビュー(1回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 71 </div> 72 </a> 73 </div> 74 </div>
css
1.newsB { 2 background-color: #fff; 3 border-radius: 5px; 4 padding: 0 1px; 5} 6 7.img-box { 8 width: 100%; 9 height: auto; 10 background-color: lightgreen; 11 overflow: hidden; 12} 13 14.img, .img-2 { 15 position: relative; 16 overflow: hidden; 17 width: 100%; 18} 19 20.img img { 21 width: 100%; 22 height: auto; 23 vertical-align: bottom; 24 transition: transform 0.2s linear; 25 -webkit-transition: transform 0.2s linear; 26} 27 28.newsB a:hover .img img { 29 transform: scale(1.1,1.1); 30 -webkit-transform: scale(1.1,1.1); 31} 32 33.img:after { 34 content: ''; 35 width: 500px; 36 height: 306px; 37 background: rgb(0,0,0,0.7); 38 position: absolute; 39 top: 0; 40 left: 0; 41 transition: 0.2s; 42} 43 44.newsB a:hover .img:after { 45 background: rgb(0,0,0,0.3); 46} 47 48.newsB a:hover .img-box:after { 49 content: ''; 50 width: 500px; 51 height: 306px; 52 position: absolute; 53 top: 0; 54 left: 0; 55 background: rgb(0,0,0,0.5); 56}
回答1件
あなたの回答
tips
プレビュー