CSS、ホバー、位置絶対および応答エラー

Question

別のdivの上にdivを配置したいとします。しかし、私は絶対的なポジションを使わずにそれを実装する方法を見つけることができません。ポジションアブソリュートは私のページを非応答にします。私は以下のような効果を得たいと思う。

これら2つは、画像を含むdivです。下半透明の黒色は、トランジションとZ-インデックスの変化を伴う背景です。

私は現在、イメージと背景の2つのdivしか持っていません。

jqueryを使用して、ホバーにボタンとフォントサイズを追加する必要がありますか、これを実装する方法はありますか？

HTML：

<div class="col-sm-3 hvr-sweep-to-top"> 
    <img class="img-responsive " src="../images/thumbnailGridImage.jpg" alt=""> 
</div> 
<div class="col-sm-3 hvr-sweep-to-top"> 
    <img class="img-responsive" src="../images/thumbnailGridImage.jpg" alt=""> 
</div> 

CSS：

.hvr-sweep-to-top { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    -webkit-transition-property: color; 
    transition-property: color; 
    -webkit-transition-duration: 0.6s; 
    transition-duration: 0.6s; 
} 
.hvr-sweep-to-top:before { 
    content: ""; 
    position: absolute; 
    z-index: 20; 
    top: 60%; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0,0,0,0.5); 
    -webkit-transform: scaleY(0); 
    transform: scaleY(0); 
    -webkit-transform-origin: 50% 100%; 
    transform-origin: 50% 100%; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.6s; 
    transition-duration: 0.6s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { 
    color: white; 
} 
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before { 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
} 

THIS HVR-スワイプ・ツー・トップは、MIT Liscense下hover.cssから抽出された

Answer 1

私はデモをあなたと同じようにしていますdとposition: absoluteの使用については心配しないでください。

それをチェックアウト：DEMO

をあなたはそれが完全には応答デザインになりますposition: relativeの親を使用してposition: absoluteを使用する場合。


HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3 col-sm-6"> 
     <div class="hvr-sweep-to-top"> 
     <div class="img-box"> 
      <img src="http://kissinmaldives.com/wp-content/uploads/2015/07/cropped-maldives.jpg" alt="maldives" /> 
     </div> 
     <div class="caption-box"> 
      <span class="caption-title">Maldives</span> 
      <a class="btn call-to-action">Book a Trip</a> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-3 col-sm-6"> 
     <div class="hvr-sweep-to-top"> 
     <div class="img-box"> 
      <img src="http://kissinmaldives.com/wp-content/uploads/2015/07/cropped-maldives.jpg" alt="maldives" /> 
     </div> 
     <div class="caption-box"> 
      <span class="caption-title">Maldives</span> 
      <a class="btn call-to-action">Book a Trip</a> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-3 col-sm-6"> 
     <div class="hvr-sweep-to-top"> 
     <div class="img-box"> 
      <img src="http://kissinmaldives.com/wp-content/uploads/2015/07/cropped-maldives.jpg" alt="maldives" /> 
     </div> 
     <div class="caption-box"> 
      <span class="caption-title">Maldives</span> 
      <a class="btn call-to-action">Book a Trip</a> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-3 col-sm-6"> 
     <div class="hvr-sweep-to-top"> 
     <div class="img-box"> 
      <img src="http://kissinmaldives.com/wp-content/uploads/2015/07/cropped-maldives.jpg" alt="maldives" /> 
     </div> 
     <div class="caption-box"> 
      <span class="caption-title">Maldives</span> 
      <a class="btn call-to-action">Book a Trip</a> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

img { 
    max-width: 100%; 
} 

.hvr-sweep-to-top { 
    position: relative; 
    margin-bottom: 30px; 
} 

.hvr-sweep-to-top .caption-box { 
    position: absolute; 
    bottom: 10px; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.5); 
    text-transform: uppercase; 
} 

.hvr-sweep-to-top .caption-box span.caption-title { 
    width: 100%; 
    text-align: center; 
    display: inline-block; 
    color: #fff; 
    font-size: 20px; 
    padding: 10px 0; 
} 

.hvr-sweep-to-top .caption-box a.btn.call-to-action { 
    border: 1px solid #fff; 
    display: none; 
    margin: 10px auto; 
    padding: 6px 20px; 
    color: #fff; 
} 

.hvr-sweep-to-top:hover .caption-box span.caption-title { 
    font-size: 28px; 
    padding: 10px 0 0 0; 
} 

.hvr-sweep-to-top:hover .caption-box a.call-to-action { 
    display: table; 
}