.box{ background: linear-gradient(#fff,#000); font-family: 'Roboto', sans-serif; border: 3px solid #860d5c; overflow: hidden; position: relative; } .box img{ width: 100%; height: auto; transition: all 0.4s ease 0s; } .box:hover img{ opacity: 0.5; transform: scale(1.2); } .box .box-content{ color: #fff; background: #860d5c; text-align: center; padding: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 20px 0 20px 20px; opacity: 0; transform-origin: top right; transform: scale(0); position: absolute; top: 5px; right: 5px; transition: all 0.4s ease 0s; } .box:hover .box-content{ opacity: 1; transform: scale(1); } .box .title{ font-size: 26px; font-weight: 300; letter-spacing: 0.5px; text-transform: capitalize; margin: 0 0 3px; } .box .post{ font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-style: italic; display: block; } .box .icon{ background-color: #860d5c; padding: 7px 20px; margin: 0; border-radius: 20px 20px 20px 0; list-style: none; position: absolute; bottom: -50px; left: -130px; transition: all 0.3s ease 0s; } .box:hover .icon{ bottom: 5px; left: 5px; } .box .icon li{ margin: 0 2px; display: inline-block; } .box .icon li a{ color: #333; background-color: #fff; font-size: 13px; text-align: center; line-height: 31px; height: 30px; width: 30px; border-radius: 50%; display: block; transition: all 0.3s ease 0s; } .box .icon li a:hover{ box-shadow: 0 0 0 3px rgba(255,255,255,0.4); } @media only screen and (max-width:990px){ .box{ margin: 0 0 30px; } }