318 views
CSSAdd prefixes
1@keyframes fadeInScale { 2 0% { 3 opacity: 0; 4 transform: scale(0) translateY(50%); 5 } 6 7 90% { 8 transform: scale(1.05); 9 } 10 11 100% { 12 opacity: 1; 13 transform: scale(1) translateY(0); 14 } 15} 16 17.container { 18 position: absolute; 19 width: 100%; 20 height: 100%; 21 display: flex; 22 justify-content: center; 23 align-items: center; 24} 25 26.card { 27 position: relative; 28 width: 20em; 29 background-color: #292929; 30 transition: all .3s ease-in-out; 31} 32 33.card:hover { 34 box-shadow: 0 10px 20px 10px rgba(black, .2); 35} 36 37.card__link { 38 display: block; 39 padding: 1em; 40 text-decoration: none; 41} 42 43.card__icon { 44 position: absolute; 45 width: 4em; 46 height: 4em; 47 transition: all .3s ease-in-out; 48} 49 50.card:hover .card__icon { 51 opacity: 0; 52 transform: scale(0); 53} 54 55.card__media { 56 padding: 2em 0; 57} 58 59.card__media svg path { 60 opacity: 0; 61 transition: all .3s ease-in-out; 62 transform-origin: center center; 63} 64 65.card:hover svg path { 66 animation: fadeInScale .3s ease-in-out forwards; 67} 68 69.card:hover svg path:nth-child(2) { 70 animation-delay: .1s; 71} 72 73.card:hover svg path:nth-child(3) { 74 animation-delay: .2s; 75} 76 77.card__header { 78 position: relative; 79} 80 81.card__header-title { 82 margin: 0 0 .25em; 83 color: white; 84} 85 86.card__header-meta { 87 margin: 0; 88 color: #999; 89} 90 91.card__header-icon { 92 opacity: 0; 93 position: absolute; 94 right: 0; 95 top: 50%; 96 margin-top: -1em; 97 transform: translateX(-20%); 98 width: 2em; 99 height: 2em; 100 transition: all .3s ease-in-out; 101} 102 103.card:hover .card__header-icon { 104 opacity: 1; 105 transform: translateX(0); 106}
HTML
1<div class="container"> 2 <article class="card"> 3 <a href="#" class="card__link"> 4 5 6 <div class="card__icon"> 7 <svg viewBox="0 0 1129 994"> 8 <g fill="none" fill-rule="nonzero" stroke="#999" stroke-width="41"> 9 <path d="M564.5 212.437L95.67 873.5h937.66L564.5 212.437z"></path> 10 <path d="M564.5 407.47L163.638 973.5h801.724L564.5 407.47z"></path> 11 <path d="M564.5 35.409L39.699 774.5H1089.3L564.5 35.409z"></path> 12 </g> 13 </svg> 14 </div> 15 16 17 <div class="card__media"> 18 <svg viewBox="0 0 1129 994"> 19 <g fill="none" fill-rule="nonzero" stroke="#F5F5F5" stroke-width="41"> 20 <path d="M564.5 212.437L95.67 873.5h937.66L564.5 212.437z"></path> 21 <path d="M564.5 407.47L163.638 973.5h801.724L564.5 407.47z"></path> 22 <path d="M564.5 35.409L39.699 774.5H1089.3L564.5 35.409z"></path> 23 </g> 24 </svg> 25 </div> 26 27 28 <div class="card__header"> 29 <p class="card__header-title">Title of Card</p> 30 <p class="card__header-meta">Subtitle</p> 31 <div class="card__header-icon"> 32 <svg viewBox="0 0 28 25"> 33 <path fill="#fff" d="M13.145 2.13l1.94-1.867 12.178 12-12.178 12-1.94-1.867 8.931-8.8H.737V10.93h21.339z"></path> 34 </svg> 35 </div> 36 </div> 37 38 </a> 39 </article> 40</div>