.box{ overflow: hidden; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); position: relative; } .box:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; transition: all 0.5s ease 0s; } .box:hover:before{ background: rgba(220, 156, 10, 0.9); } .box:after{ content: ""; width: 0; height: 200%; background: rgba(0, 0, 0, 0.1); margin: -5px 0 0 -5px; position: absolute; top: -76%; left: 0; transform: rotate(30deg); transform-origin: 0 0 0; z-index: 2; transition: all 0.4s ease-out 0s; } .box:hover:after{ width: 70%; left: 10px; } .box img{ width: 100%; height: auto; transition: all 1.5s ease 0s; } .box:hover img{ transform: scale(1.2); } .box .box-content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; } .box .icon{ padding: 0; margin: 0 0 0 25px; list-style: none; position: absolute; top: -100%; left: 0; transition: all 0.6s ease 0s; } .box:hover .icon{ top: 0; } .box .icon li{ display: inline-block; } .box .icon li a{ display: block; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; text-align: center; border: 1px solid #fff; font-size: 20px; color: #fff; margin: 30px 5px 0 0; transition: all 0.6s ease 0s; } .box .icon li a:hover{ background: #fff; color: #cc9312; } .box .box-profile{ padding-right: 10px; margin-bottom: 30px; text-align: right; position: absolute; bottom: -100%; right: 25px; border-right: 1px solid #fff; transition: all 0.6s ease 0s; } .box:hover .box-profile{ bottom: 0; } .box .title{ font-size: 22px; color: #fff; margin: 0; } .box .post{ font-size: 14px; color: #fff; } @media only screen and (max-width:990px){ .box{ margin-bottom: 20px; } }