How is possible to get 2d transformation css vertical way - html

Question

I have this with the following CSS 2d Transforms code that built a h2 in horizontal way from the Left side of the Content to the Right.
I'd need the same effect but in the "vertical way", from bottom to top.
Furthermore, I' like to have a gradient color effect from green to Red.
You can find the demo here Link EFFECT 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>
LINK HERE
</p>
</div>
</div>
</div>

Answer 1

If you are looking to create a vertical variation of your design, please consider the below effect:
.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>
LINK HERE
</p>
</div>
</div>
</div>