.box{ font-family: 'Merriweather Sans', sans-serif; overflow: hidden; position: relative; z-index: 1; transition: all .5s; } .box:hover{ box-shadow: 3px 3px 5px #999; } .box:before, .box:after{ content: ""; background: radial-gradient(circle at 23% 70%,rgba(255,255,255,0.8),#fff 30%); width: 150%; height: 150%; opacity: 0; transform: rotate(45deg); position: absolute; top:-10.5%; right:-150%; z-index: 1; transition: all 0.35s ease; } .box:after{ background: rgba(255,255,255,0.5); width: 65%; height: 65%; right: auto; left: -20%; top: -65%; } .box:hover:before{ opacity: 1; right: -85%; } .box:hover:after{ opacity: 1; top: -42%; } .box img{ width: 100%; height: auto; transition: all 0.5s ease; } .box:hover img{ transform: scale(1.2); } .box .box-content{ text-align: right; transform: translateY(-50%); position: absolute; top: 50%; right: -100%; z-index: 2; transition: all .5s; } .box:hover .box-content{ right: 5%; } .box .title{ color: #1e272e; font-size: 23px; font-weight: 700; text-transform: uppercase; margin: 0 0 3px 0; } .box .post{ font-size: 16px; text-transform: capitalize; margin: 0 0 10px; display: block; } .box .icon{ padding: 0; margin: 0; list-style: none; } .box .icon li{ display: inline-block; margin: 0 4px; } .box .icon li a{ color: #fff; background-color: #1e272e; font-size: 18px; text-align: center; line-height: 35px; height: 35px; width: 35px; border-radius: 50%; display: block; transition: all 0.3s; } .box .icon li a:hover{ color: #1e272e; background-color: #fff; border-radius: 10%; box-shadow: 0 0 5px #1e272e inset; } @media only screen and (max-width:990px){ .box { margin: 0 0 30px; } } @media only screen and (max-width:479px){ .box .title{ font-size: 20px; } }