Card by javadpg
#212121
1.card { 2 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 position: relative; 4 color: #fff; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 width: 300px; 9 height: 350px; 10 border-radius: 6px; 11 transition: .3s; 12 background-color: #000; 13} 14 15.card-p { 16 position: absolute; 17 text-align: center; 18} 19 20.card::after { 21 content: ""; 22 position: absolute; 23 z-index: -6; 24 border-radius: 6px; 25 width: 320px; 26 height: 370px; 27 background-color: #8EC5FC; 28 transition: .7s; 29 background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); 30} 31 32.card-countent { 33 padding: 20px; 34 text-align: center; 35 color: transparent; 36 transition: all .7s; 37 opacity: 0; 38} 39 40.card:hover { 41 transition: .7s; 42 transform: rotate(180deg); 43} 44 45.card:hover > .card-p { 46 color: transparent; 47} 48 49.card:hover > .card-countent { 50 opacity: 1; 51 color: #000; 52 transform: rotate(-180deg); 53}
478 views
478 views
MIT License