.box{ font-family: 'Work Sans', sans-serif; border: 5px solid #6F1E51; overflow: hidden; position: relative; z-index: 1; transition: all 0.3s ease; } .box:hover{ box-shadow: 0 0 20px -3px #6F1E51; } .box:before, .box:after{ content: ''; background-color: #6F1E51; height: 100%; width: 100%; opacity: 0; position: absolute; left: 0; top: 0; transition: all 0.3s ease-in; } .box:after{ width: 90%; transform: perspective(500px) translateX(-50%) rotateY(90deg); left: 50%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .box:hover:before{ opacity: 0.5; } .box:hover:after{ opacity: 0.9; transform: translateX(-50%) rotateY(0); } .box img{ width: 100%; height: auto; transition: all 0.3s ease; } .box .box-content{ color: #fff; text-align: center; width: 175px; filter: blur(5px); opacity: 0; transform: translateX(-50%) translateY(-50%); position: absolute; top: 55%; left: 50%; z-index: 1; transition: all 0.3s ease-in; } .box:hover .box-content{ filter: blur(0); opacity: 1; } .box .title{ font-size: 20px; font-weight: 600; text-transform: uppercase; margin: 0 0 3px; } .box .post{ font-size: 14px; letter-spacing: 1px; text-transform: capitalize; margin: 0 0 12px; display: block; } .box .icon{ padding: 0; margin: 0; list-style: none; } .box .icon li{ display: inline-block; } .box .icon li a{ color: #6F1E51; background-color: #fff; font-size: 16px; line-height: 34px; width: 33px; height: 33px; margin: 0 5px; display: block; transition: all 0.3s ease 0s; } .box .icon li a:hover{ color: #fff; background-color: #6F1E51; box-shadow: 0 0 0 2px #fff; } @media only screen and (max-width:990px){ .box { margin: 0 0 30px; } }