Animated Card Overlap?

HTML & CSS
1

I have 2 cards that overlap ie card A and card B.
When the user puts the mouse over eg card A I want card B to go behind card A and vice versa. when the mouse is over card B card A goes behind. I love the look of the animation this website uses for this and would like to do something similar: Cool Website Example

Although unlike this website I want one of the cards on top of the other upon page load. Also the blur is not necessary.

I realise that this probably utilises z-index somewhere, but what is the easiest way to do this?

2

That kind of thing cold probably be done with pure css, without js. Using transform and z-index.

1 Like
3

Sounds very interesting SamA74, how would I do it?

P.S. Funny you mentioned this, as my question seems to have been moved to the JavaScript area.

4

This was a quick attempt that half way works.
Card A does not shrink when card B is hovered, because of how the sibling selector works, it only selects elements after, not before. There may be another selector that does it, anyone know?

1 Like
5

Have you looked at the site with ā€œJavaScriptā€ or ā€œCSSā€ disabled?

It is an excellent example of how not to create a webpage. :mask:.

coothead

1 Like
6

Yes if you just change the hover to a wrap that encompasses both and shrink them both initially and then enlarge the one you are hovering.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	background: #000;
}
.cont {
	background: #ddd;
	width: 90%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	padding: 3em;
	box-sizing: border-box;
}
.card-wrap {
	display:inline-block;
}
.card {
	transition: all 1s ease-in-out;
	background: #fff;
	max-width: 340px;
	min-width: 100px;
	display: inline-block;
	margin: 2px;
	padding: 10px;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
	z-index: 5;
}
.card-wrap:hover .card {
	transition: all 1s ease-in-out;
	transform: scale(0.9);
	box-shadow: 0 0 0 rgba(0, 0, 0, 1);
	z-index: 1;
}
.card-wrap:hover .card:hover {
	transition: all 1s ease-in-out;
	transform: scale(1.2);
	box-shadow: 30px 30px 15px rgba(0, 0, 0, 0.2);
	z-index: 10;
}
.a {
	background: red;
}
.b {
	background: green;
}
</style>
</head>

<body>
<body>
<div class="cont">
  <h1>Cards</h1>
  <div class="card-wrap">
    <div class="card a">
      <h2>A</h2>
    </div>
    <div class="card b">
      <h2>B</h2>
    </div>
  </div>
</div>
</body>
</body>
</html>

http://codepen.io/paulobrien/pen/jqEOdG

2 Likes
7

Thanks for the replies guys!!
Rather than a backward and forth animation, is it possible to have the animation slightly circular-similar to how you shuffle cards? With the initial position being that one card is already overlapping the other?

8

You can add translation into the mix.

e.g.

http://codepen.io/paulobrien/pen/jqEOdG/

Needs a bit of work but the general idea is there.

Or you could look at circular motions but that gets quite complex.

3 Likes
9

This is a little too fiddly as B only seems to work when the mouse is hovered on the right edge of A. This whole concept of keyframes is new to meā€¦gonna have to do lots of reading up.

P.S. I noticed thereā€™s a floating ā€œ2ā€ in your .card-wrap:hover .card:hover { rule is that an error?

10

It is the z-index value, on a new line.

1 Like
11

Yes thatā€™s a typo :smile:

Yes you will need to tweak for better operation but the basics are there. You lose focus on hover because the element moves out of the way and you could overcome this by nesting an inner element and moving the inner element while the parent stays put and so the effect is continuous.

What would also be easier is to add a class to the parent with JS to trigger the animations and then you can have more control over each block.

1 Like
12

Hereā€™s a version that uses jquery to add a class to the parent element when a card is hovered which simplifies the process a little and allows for better animation.

2 Likes
13

Massive thanks to @SamA74 and @PaulOB for your help with this. I ended reading loads about Animation/Transition and some jQuery before i began to edit/tailor the code samples you guys submitted here. Big thanks guys!!! Ive submitted my tweaked version.

Quick question though as for card shadow for cards with regard to material design are there any good resources to determine:

  1. Shadow Colour based on background? e.g. if a card is to be placed on a very dark navy background what colour should be used for the shadow?

  2. Position and depth(based on layer level) of shadow - eg looking at my codepen card Bā€™s shadow(when on top) probably should be angled differently. A resource on both of these points would be handy.

Also @PaulOB for the benefit of my jQuery learning, I wondered if thereā€™s any reason you used:
var theParent = $(this).closest('.card-wrap'); as apposed to
var theParent = $(".card-wrap");

Thanks!

14

You may use coloured shadows if that is the effect that you want, for example, you could give a daylight look by giving the shadow a blue tint. In my pen, I used black shadows with some transparency. The idea being that it would darken whatever colour the background, even if it were multi coloured like an image.

Iā€™m not sure what you mean.
As these are not true 3D shadows, but simulated, they are never going to be 100% accurate. I tried to create the illusion of depth by making the shadows get more transparent, blurred and distant as the card moves closer, away from the background.

1 Like
15

Yes .card-wrap would apply to all elements called .card-wrap and not the parent of the element that was hovered. If you only have the one element on the page then this is not an issue but if you had two elements then both would be actioned when you hovered the other one.

Finding the parent of the button that was clicked ensures that the code is modular and re-usable.

1 Like
16

To get a better illusion of depth you may want to darken the item that is further away.

17

Useful approach! However what if the background itself was black?

18

Ah that makes it clear!
I only have one element named card-wrap(donā€™t envisage any more), would you still advise using this method purely to ensure the code is modular and re-usable?

19

Well you canā€™t go darker than black, #000 is as for as you can go. So a black shadow would be invisible and any other colour would lighten the shaded area.
If you still wanted to see a shadow, you would make the background a little above black, like #222.

1 Like
20

Actually I should have said that you lighten the item further away :blush:

Perspective generally shows items lighter and lighter the further they are away.

Color theory: Each row of hills or mountains is lighter in tone the farther it is from you, on any day

1 Like