Three Column Animated Hover Gallery
HTML
<!---->
<div class="container-section">
<div class="section">
<div class="rows-section row-one">
<img src="https://images.unsplash.com/photo-1497449711066-ecd7e3d6a484?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=401&q=80" alt="">
</div>
<div class="rows-section row-two">
<img src="https://images.unsplash.com/photo-1525408995836-2891af5f84f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" alt="">
</div>
<div class="rows-section row-three">
<img src="https://images.unsplash.com/photo-1468444242076-445cfbbe3c81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" alt="">
</div>
<footer class="container-footer">
<div class="wrapper-navigations">
<div class="menu-bottom-left">
<a href="" class="link-menu-right">Footer Link 1</a>
<a href="" class="link-menu-right">Footer Link 2</a>
<a href="" class="link-menu-right">Footer Link 3</a>
</div>
<a href="" class="copyright-footer">ASHO <span>© copepad.co/asho</span></a>
</div>
</footer>
CSS
/*3 Column Animated Hover Gallery*/
.section{
width: 913px;
margin: auto;
margin-top: 80px;
display: grid;
grid-template-columns: 273px;
grid-template-rows: auto;
transition: all .4s;
position: relative;
z-index: 20;
}
.rows-section{
height: 510px;
overflow: hidden;
transition: all .4s;
}
.rows-section img{
height: 100%;
opacity: .2;
transition: all .4s;
}
.rows-section img:hover{
opacity: 1;
}
.row-one{
grid-column-start: 1;
grid-column-end: 2;
background-color: white;
position: relative;
}
.row-two{
grid-column-start: 2;
grid-column-end: 3;
background-color: white;
margin-right: 47px;
margin-left: 47px;
margin-top: 110px;
position: relative;
}
.row-three{
grid-column-start: 3;
grid-column-end: 4;
background-color: white;
overflow: hidden;
position: relative;
margin-top: 50px;
}
.row-one:hover{
transform: translateY(-20px);
}
.row-two:hover{
transform: translateY(-20px);
}
.row-three:hover{
transform: translateY(-20px);
}
/**/
.container-footer{
width: 100%;
padding-top: 20px;
padding-bottom: 40px;
background-color: #F2F4F7;
}
.menu-bottom-left{
display: inline;
text-align: left;
position: relative;
}
.copyright-footer{
font-size: 12px;
font-weight: 500;
text-decoration: none;
color: #161719;
position: relative;
left: 720px;
z-index: 999;
}
.copyright-footer span{
color: #66cc99;
}
