JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul class="zornet_anetikas">
    <li>ZorNet.Ru: Создание сайта</li>
    <li>ZorNet.Ru: Создание сайта №1</li>
  <li><img src="http://atuin.ru/blog/wp-content/uploads/2017/02/3d-lettering.png" alt="" width="50%"></li>
    <li>ZorNet.Ru: Создание сайта №2</li>
    <li>ZorNet.Ru: Создание сайта №3</li>
    <li>ZorNet.Ru: Создание сайта №4</li>
</ul>

CSS

body {
    background: #cbcbde;
    margin: 0;
    padding: 0!important;
    font-size: 15px;
    font-family: Tahoma, Geneva, sans-serif;
    color: #292222;
}


.zornet_anetikas {
    padding:0;
    list-style: none;
    margin: 0 10%;
    perspective: 1000px;
    transform-style: preserve-3d;
}
.zornet_anetikas li {
    text-align:center;
    margin: 18px 0;
    padding: 8px 26px;
    transition: all 0.3s;
    background: linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF);
    border: 2px solid #CFCFCF;
    color: #506a6b;
    transform-style: preserve-3d;
    box-shadow: 0px 0px 6px -2px #000000 inset;
  cursor: pointer;
}
.zornet_anetikas li:hover {
    border: 2px solid #77AEDB;
    transform: scale(0.9);
    background: linear-gradient(to left, #E4EFF8 0%, #FFF, #E4EFF8);
    box-shadow: 0px 0px 6px -2px #77AEDB inset;
}
.zornet_anetikas li:before, .spisok li:after {
    content: '';
    position: absolute;
    transition: all 0.3s;
    width:100%;
    height: 2000%;
    left: 0;
    top: 100%;
    background: linear-gradient(to top, #535353 80%, #818181 100%);    
    transform-origin: 0% 0%;
    transform: rotateX(-90deg);    
    pointer-events: none;
}
.zornet_anetikas li:hover:before, .zornet_anetikas li:hover:after {
    background: linear-gradient(to top, #255A85 80%, #337AB7 100%);
}
.spisok li:after{
    top: 0;
}