I recently reworked my site to feature cards on the homepage that acts as a gallery for some of the recent drawings that I’ve done.
Initially, I had the cards pop a bit on hover by giving them a drop shadow. I played around with various other properties for a few hours before ending up with the following
A few micro-interactions are happening in the GIF above.
- Zoom effect on the image
- Increased letter spacing in the title
- Box-shadow transitions between a subtle/noticeable state
These are all done in conjunction with CSS transitions, to give it a smooth effect, both in and out.
To create that, I started with three divs. One is the actual card, the second is where we will house the background image, and the third is our title box.
<div class="card">
<div class="card_background"> </div>
<div class="title">
<h2>Parallax Galaxy</h2>
</div>
</div>
The CSS was a bit more involved. I also had to mess around with the transitions a bit until I got it just right.
.card {
position: relative;
cursor: pointer;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0, 0, 0, 0.295);
}
.card_background {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 50vh;
transition: all 2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover .card_background {
transform: scale(1.1);
}
.card:hover .title {
letter-spacing: 4px;
}
.title {
position: absolute;
left: 0;
top: 2rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 1);
max-width: 400px;
transition: all 3s cubic-bezier(0.25, 0.8, 0.25, 1);
letter-spacing: 2px;
text-transform: uppercase;
}
.title h2 {
display: inline-block;
width: auto;
font-size: 1.3rem;
font-weight: 700;
margin: 0;
}
The end-effect functioning on multiple images. A relatively quick and easy way to spice-up any gallery.
Top comments (9)
Thank you for this very interesting code. I'm a bit curious, why use
text-transform: uppercase;instead of writing uppercase text in theh2element?Ah that’s because I ripped my examples from the working code that’s on my site. This is a VuePress site and that h2 element is a template part that is programmatically filled in, so I made sure to include CSS to auto uppercase in case I ever forgot to uppercase my titles when I write them in my markdown files. Bit sloppy of me to leave that in for the article.
Well, it's a good way to enforce consistency. 🙂
Very nice! Personally, I find it to be a bit too much and too long, but I think that still fits really well with the drawings. The full hovered state gives it a solid canvas feeling.
I appreciate the feedback. Have any suggestions on how I could tone it down? I am no designer by any means, so any sort of direction is very useful!
I'd have to toy with it, but I think reducing the bg and title transitions to 1500ms (and aligning them with each other) might already do the trick. Shadow+Spacing+Scale over varying durations is a lot of movement, and with the title a lot longer than the bg, there's also no noticable "end".
But that's just personal preference, I'd be curious to see what others think on that. :)
Wow, the 1500ms for the title and bg were excellent suggestions. I gave it a shot on my local environment just now. Definitely going to commit this change soon, thank you for this!
This is awesome
Appreciate it