#212121
1.card { 2 width: 210px; 3 height: 254px; 4 border-radius: 4px; 5 background: #212121; 6 display: flex; 7 gap: 5px; 8 padding: .4em; 9} 10 11.card p { 12 height: 100%; 13 flex: 1; 14 overflow: hidden; 15 cursor: pointer; 16 border-radius: 2px; 17 transition: all .5s; 18 background: #212121; 19 border: 1px solid #ff5a91; 20 display: flex; 21 justify-content: center; 22 align-items: center; 23} 24 25.card p:hover { 26 flex: 4; 27} 28 29.card p span { 30 min-width: 14em; 31 padding: .5em; 32 text-align: center; 33 transform: rotate(-90deg); 34 transition: all .5s; 35 text-transform: uppercase; 36 color: #ff568e; 37 letter-spacing: .1em; 38} 39 40.card p:hover span { 41 transform: rotate(0); 42}
17K views
17K views
Comments
MIT License