我有一个显示图像标题的小缩略图。当您将鼠标悬停在它上面时,叠加层会覆盖整个图像,“了解更多”按钮也会显示出来。这是我目前所拥有的 fiddle :
我的 HTML:
<section id="industries">
<article>
<img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
<div class="caption">
<span>Golf Courses</span>
<a href="#" title="Learn more" class="button">Learn more</a>
</div>
</article>
<article>
<img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
<div class="caption active">
<span>Land Owners</span>
<a href="#" title="Learn more" class="button">Learn more</a>
</div>
</article>
<article>
<img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
<div class="caption">
<span>Landscape Contractors</span>
<a href="#" title="Learn more" class="button">Learn more</a>
</div>
</article>
</section>
还有我的 CSS:
#industries article {
float: left;
width: 33.33333%;
position: relative;
}
#industries article img {
max-width: 100%;
}
#industries article .caption {
position: absolute;
box-sizing: border-box;
width: 100%;
background-color: rgba(24, 66, 113, 0.65);
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 9px 14px;
bottom: 0;
height: auto;
transition: height 0.25s ease-out;
}
#industries article .caption span {
display: block;
}
#industries article .caption .button {
background-color: #b50937;
border-color: #b50937;
display: none;
color: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
#industries article:hover .caption {
height: 100%;
padding-top: 40px;
transition: height 0.25s ease-in;
}
#industries article:hover .caption span {
margin-bottom: 25px;
}
#industries article:hover .caption .button {
display: inline-block;
text-decoration: none;
}
但是,我已经尝试了min-height
和max-height
,但很明显,max-height 是行不通的,因为文本甚至没有占据整个空间最初,所以它只会达到文本的高度。当我将高度属性设置为 100% 时,它会在没有再次过渡的情况下颠簸起来。
任何帮助将不胜感激!我希望叠加层缓慢向上滑动,让“了解更多”按钮淡入(但我可以稍后在让幻灯片开始工作后执行此操作)。
最佳答案
我还没有解决所有问题,但仅使用 CSS 就非常接近了。
#industries article {
float: left;
width: 33.33333%;
position: relative;
overflow:hidden;
}
#industries article img {
max-width: 100%;
}
#industries article:hover .caption {
height:100%;
max-height: 100%;
padding-top: 40px;
}
#industries article .caption {
position: absolute;
box-sizing: border-box;
width: 100%;
background-color: rgba(24, 66, 113, 0.65);
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 9px 14px;
bottom: 0;
height: auto;
max-height: 36px;
transition: padding-top 0.5s, max-height 0.75s;
}
#industries article .caption span {
display: block;
margin-bottom: 25px;
}
#industries article .caption .button {
background-color: #b50937;
border-color: #b50937;
display: inline-block;
text-decoration: none;
color: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
visibility:hidden;
opacity: 0;
transition:visibility 0.2s linear,opacity 0.2s linear;
}
#industries article:hover .caption span {
}
#industries article:hover .caption .button {
visibility:visible;
opacity: 1;
}
<section id="industries">
<article>
<img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
<div class="caption">
<span>Golf Courses</span>
<a href="#" title="Learn more" class="button">Learn more</a>
</div>
</article>
<article>
<img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
<div class="caption active">
<span>Land Owners</span>
<a href="#" title="Learn more" class="button">Learn more</a>
</div>
</article>
<article>
<img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
<div class="caption">
<span>Landscape Contractors</span>
<a href="#" title="Learn more" class="button">Learn more</a>
</div>
</article>
</section>
关于html - CSS3 过渡高度自动到 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32482678/