CODEWITHSUNDEEP
htmlcss
Liam Collins
Liam Collins

Reputation: 19

Align multiple CSS cards in HTML

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

Upvotes: 0

Views: 3283

Answers (1)

jla
jla

Reputation: 4771

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.

Upvotes: 1

Related Questions