#e8e8e8
1.card { 2 overflow: visible; 3 position: relative; 4 width: 190px; 5 height: 254px; 6 background: #fff; 7 box-shadow: 0 2px 10px rgba(0, 0, 0, .2); 8} 9 10.card:before, 11.card:after { 12 content: ""; 13 position: absolute; 14 top: 0; 15 left: 0; 16 width: 100%; 17 height: 100%; 18 border-radius: 4px; 19 background: #fff; 20 transition: 0.5s; 21 z-index: -99; 22} 23 24.details { 25 position: absolute; 26 left: -10px; 27 right: 0; 28 bottom: 5px; 29 height: 60px; 30 text-align: center; 31 text-transform: uppercase; 32} 33 34/*Image*/ 35.imgbox { 36 position: absolute; 37 top: 10px; 38 left: 10px; 39 bottom: 10px; 40 right: 10px; 41 background: #222; 42 transition: 0.5s; 43 z-index: 1; 44} 45 46.img { 47 background: #4158D0; 48 background-image: linear-gradient(45deg, #4158D0, #C850C0); 49 position: absolute; 50 top: 0; 51 left: 0; 52 width: 100%; 53 height: 100%; 54} 55 56/*Text*/ 57.title { 58 font-weight: 600; 59 font-size: 20px; 60 color: #777; 61} 62 63.caption { 64 font-weight: 500; 65 font-size: 16px; 66 color: #4158D0; 67 display: block; 68 margin-top: 5px; 69} 70 71/*Hover*/ 72.card:hover .imgbox { 73 bottom: 80px; 74} 75 76.card:hover:before { 77 transform: rotate(20deg); 78} 79 80.card:hover:after { 81 transform: rotate(10deg); 82 box-shadow: 0 2px 20px rgba(0, 0, 0, .2); 83}
Comments
MIT License