CSS，悬停，绝对位置和响应性错误

Question

我想将div放在另一个div的上面。但我无法找到一种方法来实现，而不使用绝对位置。绝对位置让我的页面无法响应。我想达到如下所示的效果。

这两个是divs与图像。底部半透明黑色是具有过渡和z-索引变化的背景。

我目前只有两个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-滑动到顶部从hover.css在MIT的license萃取

Answer 1

我已经制作了和你一样的演示d，不用担心使用position: absolute。

检查出来：DEMO

如果要使用position: absolute与父母使用position: relative那么这将是充分响应设计。


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; 
}