我使用以下 CSS 2d Transforms
代码构建了一个 h2
从内容的左侧到右侧的水平方式。
我需要相同的效果,但以“垂直方式”,从下到上。
此外,我喜欢从绿色到红色的渐变颜色效果。
您可以在此处找到演示 Link效果 12
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #42b078;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 50px 20px;
}
.hovereffect img {
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.hovereffect:hover a, .hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" alt="">
<div class="overlay">
<h2>Effect 12</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
最佳答案
如果您希望创建垂直变化的设计,请考虑以下效果:
.hovereffect,
.hovereffect img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.overlay {
z-index: 10;
position: relative;
text-align: center;
}
.overlay p {
position: relative;
transform: translateY(-100vh);
opacity: 0;
transition: all 0.4s;
}
.hovereffect h2 {
position: relative;
}
.hovereffect h2:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 5px;
background: tomato;
transform: translateY(100vh);
opacity: 0;
transition: all 0.4s;
}
.hovereffect:hover p,
.hovereffect:hover h2:after {
transform: translateY(0);
opacity: 1;
}
.hovereffect:hover h2:after{left:0;width:100%;}
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" alt="">
<div class="overlay">
<h2>Effect 12</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
关于html - 如何获得 2d 转换 css 垂直方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40843618/