Align multiple CSS cards in HTML

Question

So I have found this codepen that I like.

@import 'https://fonts.googleapis.com/css?family=Lily+Script+One';
body {
  background: #eee;
  font-family: 'Lily Script One';
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px;
  float: left;
  perspective: 500px;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card:hover .content {
  transform: rotateY( 180deg);
  transition: transform 0.5s;
}

.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #03446A;
  text-align: center;
  font-size: 60px;
  border-radius: 5px;
  backface-visibility: hidden;
}

.back {
  background: #03446A;
  color: white;
  transform: rotateY( 180deg);
}

<div class="card">
  <div class="content">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back!
    </div>
  </div>
</div>

And what it does is allows me to put an image inside of the box and rotate it to create an animation. I've put trading card-like images inside and it all works well.

The problem that I'm having is I want there to be rows and columns so that a person can hover over all the cards with their mouse and they all flip. Basically I have no idea how to align them or put then into rows and columns. Also when I put them onto a page where there is other things such as text, images and it is scrollable, it tends to hang around the top of the page and stays there. If anyone could help me out, I would really appreciate it!

EDIT: Here's my version that I modified https://codepen.io/LC13/pen/PdxLGd

You might want to take a look at this solution link It's quite complete and very flexible — luenib
– luenib, Commented Sep 19, 2018 at 3:13

jla · Accepted Answer · 2018-09-19 03:31:11Z

Try using Flexbox. It's a flexible way of displaying content in rows or columns.

You'll need a container element to encapsulate all your cards. Set its width to 100% and display: flex;. Additionally you'll need to remove the absolute positioning etc from your cards so that they align properly.

This example code shows how you could display three cards:

HTML:

<div class="container">

    <div class="sscards">
        <div class="sscontents">
            <div class="sscardfront">
            </div>
            <div class="sscardback">
            </div>
        </div>
    </div>

    <div class="sscards">
        <div class="sscontents">
            <div class="sscardfront">
            </div>
            <div class="sscardback">
            </div>
        </div>
    </div>

    <div class="sscards">
        <div class="sscontents">
            <div class="sscardfront">
            </div>
            <div class="sscardback">
            </div>
        </div>
    </div>

</div>

CSS:

.container {
    width: 100%;
    display: flex;
}

.sscards {
    position: relative;
    width: 300px;
    height: 300px;
    perspective: 500px;
}

The above link explains many more options for styling layouts with flexbox.

Collectives™ on Stack Overflow

Align multiple CSS cards in HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related