Card Hover Interactions

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Card Hover Interactions</title> <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="./style.css"> </head> <body>  <main class="page-content"> <div class="card"> <div class="content"> <h2 class="title">Mountain View</h2> <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains</p> <button class="btn">View Trips</button> </div> </div> <div class="card"> <div class="content"> <h2 class="title">To The Beach</h2> <p class="copy">Plan your next beach trip with these fabulous destinations</p> <button class="btn">View Trips</button> </div> </div> <div class="card"> <div class="content"> <h2 class="title">Desert Destinations</h2> <p class="copy">It's the desert you've always dreamed of</p> <button class="btn">Book Now</button> </div> </div> <div class="card"> <div class="content"> <h2 class="title">Explore The Galaxy</h2> <p class="copy">Seriously, straight up, just blast off into outer space today</p> <button class="btn">Book Now</button> </div> </div> </main>  </body> </html>

@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap"); :root { --d: 700ms; --e: cubic-bezier(0.19, 1, 0.22, 1); --font-sans: 'Rubik', sans-serif; --font-serif: 'Cardo', serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; } .page-content { display: grid; grid-gap: 1rem; padding: 1rem; max-width: 1024px; margin: 0 auto; font-family: var(--font-sans); } @media (min-width: 600px) { .page-content { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 800px) { .page-content { grid-template-columns: repeat(4, 1fr); } } .card { position: relative; display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; overflow: hidden; padding: 1rem; width: 100%; text-align: center; color: whitesmoke; background-color: whitesmoke; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1); } @media (min-width: 600px) { .card { height: 350px; } } .card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 110%; background-size: cover; background-position: 0 0; -webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e); transition: -webkit-transform calc(var(--d) * 1.5) var(--e); transition: transform calc(var(--d) * 1.5) var(--e); transition: transform calc(var(--d) * 1.5) var(--e), -webkit-transform calc(var(--d) * 1.5) var(--e); pointer-events: none; } .card:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 200%; pointer-events: none; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(11.7%, rgba(0, 0, 0, 0.009)), color-stop(22.1%, rgba(0, 0, 0, 0.034)), color-stop(31.2%, rgba(0, 0, 0, 0.072)), color-stop(39.4%, rgba(0, 0, 0, 0.123)), color-stop(46.6%, rgba(0, 0, 0, 0.182)), color-stop(53.1%, rgba(0, 0, 0, 0.249)), color-stop(58.9%, rgba(0, 0, 0, 0.32)), color-stop(64.3%, rgba(0, 0, 0, 0.394)), color-stop(69.3%, rgba(0, 0, 0, 0.468)), color-stop(74.1%, rgba(0, 0, 0, 0.54)), color-stop(78.8%, rgba(0, 0, 0, 0.607)), color-stop(83.6%, rgba(0, 0, 0, 0.668)), color-stop(88.7%, rgba(0, 0, 0, 0.721)), color-stop(94.1%, rgba(0, 0, 0, 0.762)), to(rgba(0, 0, 0, 0.79))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e); transition: -webkit-transform calc(var(--d) * 2) var(--e); transition: transform calc(var(--d) * 2) var(--e); transition: transform calc(var(--d) * 2) var(--e), -webkit-transform calc(var(--d) * 2) var(--e); } .card:nth-child(1):before { background-image: url(https://images.unsplash.com/photo-1517021897933-0e0319cfbc28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ); } .card:nth-child(2):before { background-image: url(https://images.unsplash.com/photo-1533903345306-15d1c30952de?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ); } .card:nth-child(3):before { background-image: url(https://images.unsplash.com/photo-1545243424-0ce743321e11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ); } .card:nth-child(4):before { background-image: url(https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ); } .content { position: relative; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; width: 100%; padding: 1rem; -webkit-transition: -webkit-transform var(--d) var(--e); transition: -webkit-transform var(--d) var(--e); transition: transform var(--d) var(--e); transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e); z-index: 1; } .content > * + * { margin-top: 1rem; } .title { font-size: 1.3rem; font-weight: bold; line-height: 1.2; } .copy { font-family: var(--font-serif); font-size: 1.125rem; font-style: italic; line-height: 1.35; } .btn { cursor: pointer; margin-top: 1.5rem; padding: 0.75rem 1.5rem; font-size: 0.65rem; font-weight: bold; letter-spacing: 0.025rem; text-transform: uppercase; color: white; background-color: black; border: none; } .btn:hover { background-color: #0d0d0d; } .btn:focus { outline: 1px dashed yellow; outline-offset: 3px; } @media (hover: hover) and (min-width: 600px) { .card:after { -webkit-transform: translateY(0); transform: translateY(0); } .content { -webkit-transform: translateY(calc(100% - 4.5rem)); transform: translateY(calc(100% - 4.5rem)); } .content > *:not(.title) { opacity: 0; -webkit-transform: translateY(1rem); transform: translateY(1rem); -webkit-transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e); transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e); transition: transform var(--d) var(--e), opacity var(--d) var(--e); transition: transform var(--d) var(--e), opacity var(--d) var(--e), -webkit-transform var(--d) var(--e); } .card:hover, .card:focus-within { -webkit-box-align: center; align-items: center; } .card:hover:before, .card:focus-within:before { -webkit-transform: translateY(-4%); transform: translateY(-4%); } .card:hover:after, .card:focus-within:after { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .card:hover .content, .card:focus-within .content { -webkit-transform: translateY(0); transform: translateY(0); } .card:hover .content > *:not(.title), .card:focus-within .content > *:not(.title) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: calc(var(--d) / 8); transition-delay: calc(var(--d) / 8); } .card:focus-within:before, .card:focus-within:after, .card:focus-within .content, .card:focus-within .content > *:not(.title) { -webkit-transition-duration: 0s; transition-duration: 0s; } }

This is an example of an image card layout form with hover effects, designed using HTML, CSS, and Bootstrap framework 4. Media queries have been used to increase the responsiveness of the form, whereas the fonts and images are imported to the code with their URLs. The font sizes are predefined as --font-sans: 'Rubik', sans-serif, and --font-serif: 'Cardo', serif. The image cards are placed in a grid layout. The page content is given the styles of display as grid, grid-gap as 1rem, padding as 1rem, max-width as 1024px, and font-family as var(--font-sans). The title of the card has the styles of font-size as 1.3rem, font-weight as bold, and line-height as 1.2. The card description has the styles of font-family as var(--font-serif), font-size as 1.125rem, font-style as italic, and line-height as 1.35, whereas the button is given the styles of cursor as pointer to get the hand cursor effect, margin-top as 1.5rem, padding as 0.75rem 1.5rem, font-size as 0.65rem, and text-transform as uppercase to convert the text to uppercase. The button takes the background color of lighten(black, 5%), in a hover event and outline of 1px dashed yellow, in a focus event. The image cards take a transforming effect of translateY(-50%), in a hover event. Source: https://codepen.io/hexagoncircle/pen/XWbWKwL

Card Hover Interactions

Post Comment or Questions Cancel reply

Several Related Snippets