キャプションとオーバーレイホバー効果を使用した応答画像

Question

Click here to see Screenshot.キャプションとオーバーレイホバー効果を備えた応答性の高い画像を作成します。

注：すべてのデバイスで

• は、ロールオーバーとロールアウトの上、キャプションの位置は同じままになります。
• ロールオーバーでは、キャプションの背景が60％の不透明度で画像全体をカバーします。
• キャプションとキャプションの背景を整列するために、10px-15pxごとにメディアクエリを作成する必要があります。
• 添付のスクリーンショットをご覧ください。

.container-home{ 
 
\t width: 100%; 
 
\t background: #e3e3e3; 
 
\t padding-bottom: 40px; 
 
\t margin-bottom: -20px; 
 
} 
 
.caption-style-2{ 
 
\t \t } 
 

 
\t .caption-style-2 .img-home{ 
 
\t \t overflow: hidden; 
 
\t \t margin: 2% 0; 
 
\t \t 
 
\t } 
 

 
\t .caption-style-2 .img-home:hover .caption{ 
 
\t \t opacity: 1; 
 
\t \t transform: translateY(-230px); 
 
\t \t -webkit-transform:translateY(-230px); 
 
\t \t -moz-transform:translateY(-230px); 
 
\t \t -ms-transform:translateY(-230px); 
 
\t \t -o-transform:translateY(-230px); 
 

 
\t } 
 

 

 
\t .caption-style-2 img{ 
 
\t \t margin: 0px; 
 
\t \t padding: 0px; 
 
\t \t float: left; 
 
\t \t z-index: 4; 
 
\t \t width: 100%; 
 
\t } 
 

 

 
\t .caption-style-2 .caption{ 
 
\t \t cursor: pointer; 
 
\t \t position: absolute; 
 
\t \t opacity: .8; 
 
\t \t top:70px; 
 
\t \t -webkit-transition:all 0.15s ease-in-out; 
 
\t \t -moz-transition:all 0.15s ease-in-out; 
 
\t \t -o-transition:all 0.15s ease-in-out; 
 
\t \t -ms-transition:all 0.15s ease-in-out; 
 
\t \t transition:all 0.15s ease-in-out; 
 

 
\t } 
 
\t .caption-style-2 .blur{ 
 
\t \t background-color: rgba(0,0,0,0.7); 
 
\t \t opacity: 0.7; 
 
\t \t height: 400px; 
 
\t \t width: 435px; 
 
\t \t top: 150px; 
 
\t \t z-index: 5; 
 
\t \t position: absolute; 
 
\t } 
 

 
\t .caption-style-2 .caption-text h1{ 
 
\t \t font-size: 18px; 
 
\t } 
 
\t .caption-style-2 .caption-text{ 
 
\t \t z-index: 10; 
 
\t \t color: #fff; 
 
\t \t position: absolute; 
 
\t \t width: 300px; 
 
\t \t height: 220px; 
 
\t \t left: 15px; 
 
\t \t top:128px; 
 
\t \t opacity: 1; 
 
\t } 
 
\t .caption-style-2{ 
 
\t \t padding-right: 0; 
 
\t \t padding-left: 0; 
 
\t \t margin:auto; 
 
\t } 
 
\t 
 
\t .caption-style-2 .col-md-4, .caption-style-2 .col-sm-6, .caption-style-2 .col-xs-6{ 
 
\t \t padding-right: 0; 
 
\t \t padding-left: 0; 
 
\t } 
 
\t 
 
\t .caption-style-2 .margin-a { 
 
\t \t margin-left: 2%; 
 
\t \t margin-right: 2%; 
 
\t } \t 
 
\t 
 
\t .caption-style-2 .margin-b { 
 
\t \t margin-left: 2%; 
 
\t \t margin-right: 2%; 
 
\t } 
 
\t 
 
\t .caption-style-2 .col-xs-6 { 
 
\t \t width: 48%; 
 
\t \t 
 
\t } \t 
 
\t .caption-style-2 .sky-blue-bg { 
 
\t \t background: #0086b8; 
 
\t }

<div class="row caption-style-2"> 
 
    <div class="col-md-4 col-sm-6 col-xs-6 img-home"> 
 
    <img src="images/image_1.png" alt=""> 
 
    <div class="caption"> 
 
     <div class="blur sky-blue-bg"></div> 
 
     <div class="caption-text"> 
 
     <h1>Caption 1</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

私はとても残念仲間コーダーです。私は本当に退屈なので、このようなものが欲しいですか？

body { 
 
    margin: 15px; 
 
} 
 

 
.img-wrapper { 
 
    position: relative; 
 
    width: 400px; 
 
    max-width: 100%; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.img-wrapper img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100%; 
 
} 
 

 
.img-wrapper .caption { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    bottom: 0; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    color: #FFFFFF; 
 
    background: rgba(239, 169, 103, 0.85); 
 
    opacity: 0; 
 
    transition: opacity .15s ease-in-out; 
 
    -moz-transition: opacity .15s ease-in-out; 
 
    -webkit-transition: opacity .15s ease-in-out; 
 
} 
 

 
.img-wrapper:hover .caption { 
 
    opacity: 1; 
 
    transition: opacity .25s ease-in-out; 
 
    -moz-transition: opacity .25s ease-in-out; 
 
    -webkit-transition: opacity .25s ease-in-out; 
 
}

<div class="img-wrapper"> 
 
    <img src="http://thumb101.shutterstock.com/display_pic_with_logo/1248838/282506297/stock-vector-cartoon-carousel-with-colorful-horses-282506297.jpg" /> 
 
    <div class="caption"> 
 
     Lorem ipsum dolor 
 
    </div> 
 
</div>