Simple cards

Cards
CSS | JavaScript

+ ANIMATION :

KEI

Marketing

ICHIRO

Design

TAKA

Webmaster

+ Description :

These simple cards could be used to showcase for instance your team members.

In order to achieve them you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the cards to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. So for oxygen I used a code-element to build-up the cards however I tried to cover the case Font Awesome is not loaded into your builder. For Bricks builder, please follow the HTML structure so you can add-up divs instead and add icon block (therefore Font Awesome) instead of the <i> tag.

I will start with the mandatory library to be loaded, Font Awesome in this case (in the head), then I will show respectively the HTML, CSS and JavaScript.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied, the font is not defined, the container div doesn’t have any background color and the <a> tag is not “unset”.

 

Load Font Awesome library if necessary, please adapt according to your builder:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

 

HTML:

 

<div class="scard-section">
    <div class="scard-ctn">
        <div class="scard-head">
            <div class="scard-tog"></div>
            <div class="scard-img-wrapper">
                <img class="scard-img" src="/wp-content/uploads/2022/04/agence-kokoro-R0006144.jpeg" />
            </div>
        </div>
        <div class="scard-data">
            <p class="scard-title">KEI</p>
            <p class="scard-txt">Marketing</p>
            <div class="scard-icon-wrapper">
                <i class="fa-brands fa-facebook-square"></i>
                <i class="fa-brands fa-instagram-square"></i>
                <i class="fa-brands fa-twitter-square"></i>
                <i class="fa-brands fa-youtube-square"></i>
            </div>
        </div>
    </div>
    <div class="scard-ctn">
        <div class="scard-head">
            <div class="scard-tog"></div>
            <div class="scard-img-wrapper">
                <img class="scard-img" src="/wp-content/uploads/2022/04/agence-kokoro-R0004362.jpeg" />
            </div>
        </div>
        <div class="scard-data">
            <p class="scard-title">ICHIRO</p>
            <p class="scard-txt">Design</p>
            <div class="scard-icon-wrapper">
                <i class="fa-brands fa-facebook-square"></i>
                <i class="fa-brands fa-instagram-square"></i>
                <i class="fa-brands fa-twitter-square"></i>
                <i class="fa-brands fa-youtube-square"></i>
            </div>
        </div>
    </div>
    <div class="scard-ctn">
        <div class="scard-head">
            <div class="scard-tog"></div>
            <div class="scard-img-wrapper">
                <img class="scard-img" src="/wp-content/uploads/2022/04/agence-kokoro-67.jpeg" />
            </div>
        </div>
        <div class="scard-data">
            <p class="scard-title">TAKA</p>
            <p class="scard-txt">Webmaster</p>
            <div class="scard-icon-wrapper">
                <i class="fa-brands fa-facebook-square"></i>
                <i class="fa-brands fa-instagram-square"></i>
                <i class="fa-brands fa-twitter-square"></i>
                <i class="fa-brands fa-youtube-square"></i>
            </div>
        </div>
    </div>
</div>

 

CSS:

:root {
  --primary: #202020;
  --secondary: #9b6bf7;
  --col-txt: #fff;
  --transition: all 0.3s linear;
}
.scard-section {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;	
  justify-content: center;
}
.scard-ctn {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
  padding: 5px;
  margin: 1.5rem 1rem 1.5rem 1rem;
  width: 175px;
  height: 80px;
  border-radius: 10px;
  box-shadow: 5px 5px 11px #101010, -5px -5px 11px #303030;
  transition: width 0.3s, height 0.3s 0.3s;
}
.scard-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 100%;
}
.scard-tog {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  z-index: 1;
  cursor: pointer;
}
.scard-img-wrapper {
  padding: 5px;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  top: 2.5px;
  right: 12px;
  border-radius: 50%;
  transition: top 0.3s 0.3s, right 0.3s, width 0.3s 0.3s, height 0.3s 0.3s,
    box-shadow 0.3s 0.3s;
}
.scard-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.scard-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  margin-top: 25px;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: var(--transition);
}
.scard-title {
  color: var(--col-txt);
  font-size: 2rem;
  margin: 35px 0 0 0;
}
.scard-txt {
  color: var(--col-txt);
  font-size: 1.2rem;
}
.scard-icon-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.fa-brands {
  color: var(--secondary);
  font-size: 26px;
  padding: 6px;
  margin: 0 0.5rem;
  cursor: pointer;
  box-shadow: 5px 5px 11px #101010, -5px -5px 11px #303030;
}
.scard-tog:before {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  width: 36px;
  height: 2px;
  background: var(--col-txt);
  box-shadow: 0 8px 0 var(--col-txt);
  transform: translateY(-14px);
  transition: 0.3s;
}
.scard-tog:after {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  width: 36px;
  height: 2px;
  background: var(--col-txt);
  transform: translateY(2px);
  box-shadow: 0 8px 0 var(--col-txt);
  transition: 0.3s;
}
.scard-ctn.reveal .scard-tog:before {
  transform: rotate(45deg) translateY(0px);
  box-shadow: 0 0 0 transparent;
}
.scard-ctn.reveal .scard-tog:after {
  transform: rotate(-45deg) translateY(0px);
  box-shadow: 0 0 0 transparent;
}
.scard-ctn.reveal {
  width: 300px;
  height: 400px;
}
.scard-ctn.reveal .scard-data {
  opacity: 1;
}
.scard-ctn.reveal .scard-img-wrapper {
  right: 70px;
  top: 70px;
  width: 150px;
  height: 150px;
  box-shadow: 5px 5px 11px #101010, -5px -5px 11px #303030;
}
.fa-brands:active {
  box-shadow: 0 0 2px #000;
}
@media screen and (max-width: 991px) {
  .scard-section {
    flex-direction: column;
  }
}

 

JavaScript:

const cards = document.querySelectorAll(".scard-ctn");

cards.forEach((card) => {
  const tog = card.querySelector(".scard-tog");
  tog.addEventListener("click", () => card.classList.toggle("reveal"));
});
Contact
I can adapt and install this animation on your website, contact me and let's talk about it!