Как можно получить преобразование 2d css по вертикали

Question

У меня есть это со следующим кодом 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>

Answer 1

Если вы хотите создать вертикальный вариант дизайна, пожалуйста, рассмотреть вопрос ниже эффект:

.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>