How can I make something pop out when I hover over it?
I created a group of containers and I wanted to add some more styling to them to make them more unique I wanted to have the container kind of pop out and get closer to the screen I dont really know how to explain it
12 Replies
For example something like this, The pictures are normal but once you hover over them they pop out
Youll want to use transform translateZ, with transform-style: preserve-3d on itself and its parent and possibly grandparent depending on the structure. The Z-axis moves and element further away or closer to "you". You may also neeed to use the perspective property on the parent/grandarent like perspective: 10000px; but play with the number. Alternatively, you could use scale which can sometimes have the same effect depending what youre going for.
I made the mistake of checking my phone rather than sleeping, grabbed my laptop and made it quickly in 15 minutes https://codepen.io/z-/pen/gOEeEPW/ba6878193aca8f6580d1ada475381c7b?editors=1100
I am sleepy and I might think of a way to remove the duplication of HTML but for now that's just a way to get it to smoothly animate without JavaScript, it's fine it's just hidden text so it's not as if it's vital it has to be removed, this is also to avoid having the cards open a fixed amount, how much it expands by depends on the content and no magic numbers
Note that I'm using Pug and Stylus, click the down chevrons and click "View Compiled" to view it as HTML and CSS. I also haven't dealt with it overflowing when the screen is narrow, unimportant for how the card works
you could try using a transformation on grid-template-rows
https://css-tricks.com/css-grid-can-do-auto-height-transitions/
Chris Coyier
CSS-Tricks
CSS Grid Can Do Auto Height Transitions | CSS-Tricks
Bonafide CSS trick alert! Nelson Menezes figured out a new way (that only works in Firefox for now) that is awfully clever.
I’m using that. The issue with it is that content doesn’t slide down it reveals in place top to bottom. So I have hidden content that does that and then displayed content that is position absolute tied to the bottom and the final placement is on top of the hidden content
ah okay, yea i see, it does need to create the space. didn't think of that
To re-explain it what I wanted to do was just have the container pop out and come closer to the user when they hover over it and then go back down when the user stops hovering over it
pretty much the container should look like its really hovering and floating then go back down when they stop hovering
https://www.w3schools.com/cssref/css_pr_scale.php
use this scale propertly and specify how much you wanna scale it.
I think it would look bad, too much going on, and scale on text almost always sucks
would 3d translate forward work better?
I still think it wouldn’t look good. The animation I made based on what I expected they’d want is something that is not real but 3D effects are for things to look more real, there’s a clash