#e8e8e8
1.parent { 2 width: 300px; 3 padding: 20px; 4 perspective: 1000px; 5} 6 7.card { 8 padding-top: 50px; 9 /* border-radius: 10px; */ 10 border: 3px solid rgb(255, 255, 255); 11 transform-style: preserve-3d; 12 background: linear-gradient(135deg,#0000 18.75%,#f3f3f3 0 31.25%,#0000 0), 13 repeating-linear-gradient(45deg,#f3f3f3 -6.25% 6.25%,#ffffff 0 18.75%); 14 background-size: 60px 60px; 15 background-position: 0 0, 0 0; 16 background-color: #f0f0f0; 17 width: 100%; 18 box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px; 19 transition: all 0.5s ease-in-out; 20} 21 22.card:hover { 23 background-position: -100px 100px, -100px 100px; 24 transform: rotate3d(0.5, 1, 0, 30deg); 25} 26 27.content-box { 28 background: rgba(4, 193, 250, 0.732); 29 /* border-radius: 10px 100px 10px 10px; */ 30 transition: all 0.5s ease-in-out; 31 padding: 60px 25px 25px 25px; 32 transform-style: preserve-3d; 33} 34 35.content-box .card-title { 36 display: inline-block; 37 color: white; 38 font-size: 25px; 39 font-weight: 900; 40 transition: all 0.5s ease-in-out; 41 transform: translate3d(0px, 0px, 50px); 42} 43 44.content-box .card-title:hover { 45 transform: translate3d(0px, 0px, 60px); 46} 47 48.content-box .card-content { 49 margin-top: 10px; 50 font-size: 12px; 51 font-weight: 700; 52 color: #f2f2f2; 53 transition: all 0.5s ease-in-out; 54 transform: translate3d(0px, 0px, 30px); 55} 56 57.content-box .card-content:hover { 58 transform: translate3d(0px, 0px, 60px); 59} 60 61.content-box .see-more { 62 cursor: pointer; 63 margin-top: 1rem; 64 display: inline-block; 65 font-weight: 900; 66 font-size: 9px; 67 text-transform: uppercase; 68 color: rgb(7, 185, 255); 69 /* border-radius: 5px; */ 70 background: white; 71 padding: 0.5rem 0.7rem; 72 transition: all 0.5s ease-in-out; 73 transform: translate3d(0px, 0px, 20px); 74} 75 76.content-box .see-more:hover { 77 transform: translate3d(0px, 0px, 60px); 78} 79 80.date-box { 81 position: absolute; 82 top: 30px; 83 right: 30px; 84 height: 60px; 85 width: 60px; 86 background: white; 87 border: 1px solid rgb(7, 185, 255); 88 /* border-radius: 10px; */ 89 padding: 10px; 90 transform: translate3d(0px, 0px, 80px); 91 box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px; 92} 93 94.date-box span { 95 display: block; 96 text-align: center; 97} 98 99.date-box .month { 100 color: rgb(4, 193, 250); 101 font-size: 9px; 102 font-weight: 700; 103} 104 105.date-box .date { 106 font-size: 20px; 107 font-weight: 900; 108 color: rgb(4, 193, 250); 109} 110
2.4K views
2.4K views
Comments
MIT License