.card { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; position: relative; color: #fff; display: flex; align-items: center; justify-content: center; width: 300px; height: 350px; border-radius: 6px; transition: .3s; background-color: #000; } .card-p { position: absolute; text-align: center; } .card::after { content: ""; position: absolute; z-index: -6; border-radius: 6px; width: 320px; height: 370px; background-color: #8EC5FC; transition: .7s; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); } .card-countent { padding: 20px; text-align: center; color: transparent; transition: all .7s; opacity: 0; } .card:hover { transition: .7s; transform: rotate(180deg); } .card:hover > .card-p { color: transparent; } .card:hover > .card-countent { opacity: 1; color: #000; transform: rotate(-180deg); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter