我想对一些translateX
标题标题应用<h4>
效果。我已经测试了代码并且它正在工作,但是当执行效果时我注意到了一些问题。问题与元素在应用翻译的位置上的位置有关,因为我希望只有当父div悬停时效果才可见。问题是,如果它没有悬停,它也将显示最近的元素。
这是一个代码示例,我使用bootstrap 4卡列。
<div class="card-columns">
<div class="card">
<div class="overlay">
<h4 class="title"><a href="#">link1</a></h4>
</div>
</div>
<div class="card">
<div class="overlay">
<h4 class="title"><a href="#">link2</a></h4>
</div>
</div>
<div class="card">
<div class="overlay">
<h4 class="title"><a href="#">link3</a></h4>
</div>
</div>
</div>
<style>
.overlay{
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
.card:hover .overlay{
opacity: 1;
}
.title{
transition: all 300ms;
transform: translateX(-200%);
}
.card:hover .title{
transition: all 300ms;
transform: translateX(0%);
}
</style>
Codepen演示https://codepen.io/anon/pen/oOWyVK
尝试在overlay类中添加overflow:hidden;
,这样就可以了
.overlay{
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
overflow:hidden;
}
这就是你需要的吗?
你有这个问题因为你正在做-200%的translateX所以title
将从你的盒子里出来,你需要用overflow:hidden;
隐藏元素title
开箱即用:)
只需添加overflow: hidden;
.card-columns .card {
display: inline-block;
width: 100%;
overflow: hidden;
}