Skip to content
Advertisement

Clicking on a flip card keeps it flipped over

I’ve made flip card with mouse hover by HTML & CSS.

body {
  color: #e0e1dd;
  font-family: "Poppins", sans-serif;
}
.back_page {
  padding: 1em;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
}
.back_page img {
  border-radius: 20px;
  height: 1.5em;
  width: 1.5em;
}
a img:hover {
  background:#415a77;
}
.square {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.box {
  cursor: pointer;
  width: 300px;
  height: 200px;
  margin-bottom: 30px;
}
/* BOX 1 */

.center1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.front1 {
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: #778da9;
  transform: perspective(800px);
  backface-visibility: hidden;
  transition: all 0.5s;
  overflow: hidden;
  border-radius: 20px;
}

.box1:hover .front1 {
  transform: rotateX(180deg);
}
.front1::before {
  content: "";
  position: absolute;
  bottom: -25px;
  border-radius: 50%;
  background: #6e2626;
  width: 50px;
  height: 50px;
}

.back1 {
  position: absolute;
  width: 300px;
  height: 200px;
  background: #415a77;
  transform: perspective(800px) rotateY(0deg);
  backface-visibility: hidden;
  transition: all 0.5s;
  flex-direction: column;
  transform: rotateX(180deg);
  border-radius: 20px;
}

.box1:hover .back1 {
  transform: rotateX(0deg);
}

.back1 p {
  margin: 10px 30px;
  font-size: 20px;
  text-align: center;
}
<div class="square">
        <div class="box1 box">
            <div class="front1 center1">
                <h1>Front</h1>
            </div>
            <div class="back1 center1">
                <p>Back</p>
            </div>
        </div>
    </div>

I want to do that after clicking on the “back” the card does not return to the front (on one page will be few these flip card, so when clicked 1st will be the on “back”, then clicking another one and this two cards will be on the back). Next things is i need return all clicked card to initial state.

Advertisement

Answer

You can add a class show for keeping the card shown, add onclick on the box elements and and change the rest of the code accordingly.

function focusCard(element) {
  element.getElementsByClassName("front")[0].classList.toggle("show");
  element.getElementsByClassName("back")[0].classList.toggle("show");
}
body {
  font-family: "Poppins", sans-serif;
}

#wrapper {
  display: flex;
  flex-direction: row;
}

.square {
  color: #e0e1dd;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  cursor: pointer;
  width: 300px;
  height: 200px;
  margin-bottom: 30px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.front {
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: #778da9;
  transform: perspective(800px);
  backface-visibility: hidden;
  transition: all 0.5s;
  overflow: hidden;
  border-radius: 20px;
}

.box:hover .front,
.show {
  transform: rotateX(180deg);
}

.front::before {
  content: "";
  position: absolute;
  bottom: -25px;
  border-radius: 50%;
  background: #6e2626;
  width: 50px;
  height: 50px;
}

.back {
  position: absolute;
  width: 300px;
  height: 200px;
  background: #415a77;
  transform: perspective(800px) rotateY(0deg);
  backface-visibility: hidden;
  transition: all 0.5s;
  flex-direction: column;
  transform: rotateX(180deg);
  border-radius: 20px;
}

.box:hover .back,
.show {
  transform: rotateX(0deg);
}

.back p {
  margin: 10px 30px;
  font-size: 20px;
  text-align: center;
}
<div id="wrapper">
  <div class="square">
    <div class="box" onclick="focusCard(this)">
      <div class="front center">
        <h1>Front</h1>
      </div>
      <div class="back center">
        <p>Back</p>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="box" onclick="focusCard(this)">
      <div class="front center">
        <h1>Front</h1>
      </div>
      <div class="back center">
        <p>Back</p>
      </div>
    </div>
  </div>
</div>
Advertisement