.box{ overflow: hidden; position: relative; } .box:before{ content: ""; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,0.5); position: absolute; top: 50%; left: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(0); transition: all 0.3s ease 0s; } .box:hover:before{ border: 500px solid rgba(0,0,0,0.5); opacity: 1; transform: translate(-50%, -50%) rotate(360deg); } .box img{ width: 100%; height: auto; } .box .box-content{ width: 100%; text-align: center; position: absolute; top: 50%; left: 0; opacity: 0; transform: translateY(-50%) scale(2); transition: all 0.2s ease 0s; } .box:hover .box-content{ opacity: 1; transform: translateY(-50%) scale(1); } .box .box-content:after{ content: ""; width: 200px; height: 200px; background: rgba(93,53,176,0.9); position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%); clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%); } .box .title{ font-size: 20px; font-weight: 600; color: #fff; text-transform: capitalize; margin: 0 0 5px 0; } .box .post{ display: block; font-size: 13px; color: #fff; text-transform: capitalize; letter-spacing: 1px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); margin-bottom: 10px; } .box .icon{ padding: 0; margin: 0; list-style: none; } .box .icon li{ display: inline-block; margin-left: 5px; } .box .icon li a{ display: block; width: 35px; height: 35px; line-height: 33px; border-radius: 40% 0; border: 2px solid #fff; font-size: 17px; color: #fff; transition: all 0.3s ease 0s; } .box .icon li a:hover{ background: #fff; color: rgb(93,53,176); } @media only screen and (max-width:990px){ .box{ margin-bottom: 30px; } }