.box{ text-align: center; position: relative; overflow: hidden; } .box:after{ content:""; width: 100%; height: 100%; background-color: rgba(52, 35, 166,0.5); position: absolute; top:0; left: 0; opacity: 0; transition: all 0.5s ease 0s; } .box:hover:after{ opacity: 1; } .box img{ width: 100%; height: auto; } .box .icon{ width: 100%; padding: 0; margin: 0; list-style: none; position: absolute; top: -100%; left: 0; z-index: 1; transition: all 0.5s ease 0s; } .box:hover .icon{ top: 30%; } .box .icon li{ display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 8px; background: #dff3e4; margin-right: 20px; transform:rotate(45deg); } .box .icon li:last-child{ margin-right: 0; } .box .icon li a{ display: block; font-size: 22px; color: #3423a6; transform: rotate(-45deg); } .box .box-content{ width: 100%; padding: 15px 0; background: #DFF3E4; position: absolute; bottom: -100%; left: 0; z-index: 2; transition: all 0.5s ease 0s; } .box:hover .box-content{ bottom: 0; } .box .title{ font-size: 24px; color: #3d475e; margin: 0 0 5px 0; text-transform: capitalize; } .box .post{ font-size: 14px; color: #ffa630; text-transform: capitalize; } @media only screen and (max-width: 990px){ .box{ margin-bottom: 20px; } }