Responsive image hover标题

我面临的问题是悬停标题.caption-text和覆盖.blur是固定的宽度和高度，而图像是响应。Responsive image hover标题

有关如何修改此代码以使覆盖图和标题适合图像宽度和高度的任何建议？

.caption-style-4 { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.caption-style-4 li { 
 
    float: left; 
 
    padding: 0px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.caption-style-4 li:hover .caption { 
 
    opacity: 1; 
 
} 
 
.caption-style-4 li:hover img { 
 
    opacity: 1; 
 
    transform: scale(1.15, 1.15); 
 
    -webkit-transform: scale(1.15, 1.15); 
 
    -moz-transform: scale(1.15, 1.15); 
 
    -ms-transform: scale(1.15, 1.15); 
 
    -o-transform: scale(1.15, 1.15); 
 
} 
 
.caption-style-4 img { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    float: left; 
 
    z-index: 4; 
 
} 
 
.caption-style-4 .caption { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.45s ease-in-out; 
 
    -moz-transition: all 0.45s ease-in-out; 
 
    -o-transition: all 0.45s ease-in-out; 
 
    -ms-transition: all 0.45s ease-in-out; 
 
    transition: all 0.45s ease-in-out; 
 
} 
 
.caption-style-4 img { 
 
    -webkit-transition: all 0.25s ease-in-out; 
 
    -moz-transition: all 0.25s ease-in-out; 
 
    -o-transition: all 0.25s ease-in-out; 
 
    -ms-transition: all 0.25s ease-in-out; 
 
    transition: all 0.25s ease-in-out; 
 
} 
 
.caption-style-4 .blur { 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
    height: 300px; 
 
    width: 400px; 
 
    z-index: 5; 
 
    position: absolute; 
 
} 
 
.caption-style-4 .caption-text h1 { 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
} 
 
.caption-style-4 .caption-text { 
 
    z-index: 10; 
 
    color: #fff; 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 300px; 
 
    text-align: center; 
 
    top: 100px; 
 
}

<div class="container-a4"> 
 
    <ul class="caption-style-4"> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-600-480-1.jpg" alt=""> 
 
     <div class="caption"> 
 
     <div class="blur"></div> 
 
     <div class="caption-text"> 
 
      <h1>Amazing Caption</h1> 
 
      <p>Whatever It Is - Always Awesome</p> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul </div>

http://codepen.io/anon/pen/GNzMNV

来源

2016-12-19 Lisa Jaffé

请你可以包括你编译的HTML而不是PHP来让我们重现你的问题。通过扫描可能是由于您使用了绝对定位。 –

来源链接在这里：http：//hasinhayder.github.io/ImageCaptionHoverAnimation/ –

我认为这是因为绝对位置，因为没有瓦特/小时强迫div打开。寻找一个建议/教程链接，如果可能的话可以帮助我解决这个问题 –

可以包括的jquery.js并计算宽度，图像的高度。也增加了CSS .singlePillar .caption {top:0px;} 例子： https://jsfiddle.net/hc2tr7s3/

来源

2016-12-19 10:45:48

这工作的一种享受 - 谢谢！ –

只要更新你的CSS

.caption-style-4 .caption-text { 
    z-index: 10; 
    color: #fff; 
    position: absolute; 
    width: 100%; 
    height: 95px; 
    text-align: center; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
.caption-style-4 .blur { 
    background-color: rgba(0,0,0,0.65); 
    height: 100%; 
    width: 100%; 
    z-index: 5; 
    position: absolute; 
} 
.caption-style-4 .caption { 
    cursor: pointer; 
    position: absolute; 
    opacity: 0; 
    -webkit-transition: all 0.45s ease-in-out; 
    -moz-transition: all 0.45s ease-in-out; 
    -o-transition: all 0.45s ease-in-out; 
    -ms-transition: all 0.45s ease-in-out; 
    transition: all 0.45s ease-in-out; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
}

这里是更新codepen http://codepen.io/anon/pen/MbLEXr

让我知道，如果它仍然没有工作。

来源

2016-12-19 11:14:53

Responsive image hover标题

回答

相关问题