Html Question posted in
Some basic documentation can be found here.

Html – How to position the heart correctly in this card

I am creating a digital valentines day card, where it opens up,etc and am trying to place the heart in the middle, right below surprise, so it’s the first thing they see when the open it.I tried a lot of ways to fix it but they all don’t work.I tried changing the heart’s position as well as the cards, but none of them worked.Does anyone know how to fix it?

.codepen-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D9DCD6;
  height: 100vh;
}

.book {
  height: 15rem;
  width: 15rem;
  font-size: 1.4rem;
  box-shadow: 1rem 2rem 3rem rgba(#000, .25);
  text-align: center;
  position: relative;
  color: #484e4a;
}

.page {
  width: 100%;
  height: 15rem;
  perspective: 1500px;
}

.page__1 {
  background-color: #0d5c63;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 1s 0.3s;
  transform-origin: 0 50%;
  z-index: 2;
}

.page__1::after {
  content: "Neat, huh?";
  color: #eff0eb;
  position: absolute;
  padding-top: 1.5rem;
  top: 0;
  left: 0;
  background-color: #424b54;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transform: rotateY(180deg);
  transition: all 0.3s 0.5s;
}

.page__2 {
  background-color: #baa898;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

.page:hover .page__1 {
  transform: rotateY(-180deg);
  box-shadow: 1.5rem 2rem 3rem rgba(0, 0, 0, .25);
}

.page:hover .page__1::after {
  opacity: 1;
}

.heart-container {
  position: relative;
  width: 100px;
  height: 160px;
}

.heart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-45deg);
  transition: transform 0.5s;
  animation: heartbeat 1s infinite alternate;
  cursor: pointer;
}

.heart:before,
.heart:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100px 100px 0 0;
  position: absolute;
  background-color: #e74c3c;
  box-shadow: -10px 6px 10px -2px rgba(0, 0, 0, 0.35);
}

.heart:before {
  left: 44%;
  top: 0;
  transform: scale(-1) rotate(225deg);
}

.heart:after {
  left: 0;
  top: 0;
  transform: scale(-1) rotate(-225deg);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.heart:hover:before,
.heart:hover:after {
  background-color: unset;
  box-shadow: none;
}

.heart:hover:before {
  border: 2px dashed #ff0000;
}

.heart:hover:after {
  border: 2px dashed #ffbf00;
}
<div class="codepen-wrapper">
  <div class="book">
    <div class="page">
      <div class="page__1">
        <p>Hover to open</p>
      </div>
      <div class="page__2">
        <p>Surprise!</p>
      </div>
      <div class="heart-container">
        <div class="heart"></div>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0 
    .codepen-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D9DCD6;
  height: 100vh;
}

.book {
  height: 15rem;
  width: 15rem;
  font-size: 1.4rem;
  box-shadow: 1rem 2rem 3rem rgba(#000, .25);
  text-align: center;
  position: relative;
  color: #484e4a;
}

.page {
  width: 100%;
  height: 15rem;
  perspective: 1500px;
}

.page__1 {
  background-color: #0d5c63;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 1s 0.3s;
  transform-origin: 0 50%;
  z-index: 2;
}

.page__1::after {
  content: "Neat, huh?";
  color: #eff0eb;
  position: absolute;
  padding-top: 1.5rem;
  top: 0;
  left: 0;
  background-color: #424b54;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transform: rotateY(180deg);
  transition: all 0.3s 0.5s;
}

.page__2 {
  background-color: #baa898;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

.page__2 p{
 position: relative;
 top:75px
}
.page:hover .page__1 {
  transform: rotateY(-180deg);
  box-shadow: 1.5rem 2rem 3rem rgba(0, 0, 0, .25);
}

.page:hover .page__1::after {
  opacity: 1;
}

.heart-container {
  position: relative;
  width: 100px;
  height: 160px;

}

.heart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 30px;
  left: 45px;
  transform: rotate(-45deg);
  transition: transform 0.5s;
  animation: heartbeat 1s infinite alternate;
  cursor: pointer;
}

.heart:before,
.heart:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100px 100px 0 0;
  position: absolute;
  background-color: #e74c3c;
  box-shadow: -10px 6px 10px -2px rgba(0, 0, 0, 0.35);
}

.heart:before {
  left: 44%;
  top: 0;
  transform: scale(-1) rotate(225deg);
}

.heart:after {
  left: 0;
  top: 0;
  transform: scale(-1) rotate(-225deg);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.heart:hover:before,
.heart:hover:after {
  background-color: unset;
  box-shadow: none;
}

.heart:hover:before {
  border: 2px dashed #ff0000;
}

.heart:hover:after {
  border: 2px dashed #ffbf00;
}
    <div class="codepen-wrapper">
  <div class="book">
    <div class="page">
      <div class="page__1">
        <p>Hover to open</p>
      </div>
      <div class="page__2">
        <p>Surprise!</p>
      </div>
      <div class="heart-container">
        <div class="heart"></div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You had a lot of extra CSS which I deleted. Key here is where I moved your element just to the left after I did that CSS reduction with a negative margin margin-left: -1em;
    I put some ugly borders on just to show what is where.

    .codepen-wrapper {
  display: grid;
  place-items: center;
  background-color: #D9DCD6;
  height: 100vh;
}

.book {
  font-size: 1.4rem;
  box-shadow: 1rem 2rem 3rem rgba(#000, .25);
  color: #484e4a;
  border: 1px solid #00ff00;
}

.page {
  perspective: 1500px;
  display: grid;
  place-items: center;
  border: 1px solid #0000ff;
}

.heart-container {
  width: 100px;
  height: 160px;
  border: 1px solid #ff00ff;
}

.heart {
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  transition: transform 0.5s;
  animation: heartbeat 1s infinite alternate;
  cursor: pointer;
  border: 1px solid #ffff00;
  margin-left: -1em;
}

.heart:before,
.heart:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100px 100px 0 0;
  position: absolute;
  background-color: #e74c3c;
  box-shadow: -10px 6px 10px -2px rgba(0, 0, 0, 0.35);
}

.heart:before {
  left: 44%;
  transform: scale(-1) rotate(225deg);
}

.heart:after {
  transform: scale(-1) rotate(-225deg);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.heart:hover:before,
.heart:hover:after {
  background-color: unset;
  box-shadow: none;
}

.heart:hover:before {
  border: 2px dashed #ff0000;
}

.heart:hover:after {
  border: 2px dashed #ffbf00;
}
    <div class="codepen-wrapper">
  <div class="book">
    <div class="page">
      <div class="page__1">
        <p>Hover to open</p>
      </div>
      <div class="page__2">
        <p>Surprise!</p>
      </div>
      <div class="heart-container">
        <div class="heart"></div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search