CODEWITHSUNDEEP
cssoverflowflip
Mark
Mark

Reputation: 3118

CSS flip card - how do I make the front smaller than the back

I have a flip card, which I've built using CSS. It flips perfectly, but I'd like to make the front side of the card smaller than the back. I've tried adjusting the heights, but I'm running into issues with overflow, etc. I tried to Google this but only found one site; they didn't quite cover what I need.

So my question is how do I make the front shorter than the back, with the back having consistent background color and overflow that fully shows and doesn't leave the background.

Here is a great website that does just what I'd like: https://businessexpress.maryland.gov/

Please be sure to look at that website above. It really shows what I mean. I looked at their code but I can't figure out what to do.

I have a fiddle here, with my code: https://jsfiddle.net/1ehtw5L4/

Here is my HTML:

<div class="flip-cards">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h2 class="front-title">Prepare Your Business</h2>
    </div>
    <div class="flip-card-back">
      <h2>Content</h2>
    </div>
  </div>
</div>

Here is my CSS:

.flip-card {
  background-color: transparent;
  width: 19%;
  /* change the below */
  height: 400px;
  margin: auto;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #008CCC;
  color: white;
  text-align: center;
  height: 100%;
}

.flip-card-back {
  background-color: #E7E7E7;
  color: black;
  transform: rotateY(180deg);
  /* change the below */
  height: 400px;
}

.flip-card-back ul {
  padding-left:1em;
  padding-right:1em;
  list-style-type:none;
}

.flip-card-back li {
  border-bottom: 1px solid black;
}

.flip-card-back li:last-child {
  border-bottom: none;
}

.flip-card-back h2 {
  text-align:center;
  background-color:black;
  color:white;
  padding-top:0.6em;
  padding-bottom:0.6em;
}

.flip-card-back h2 a, .flip-card-back h2 a:visited {
  color:white;
}

.flip-card-back a {
  display:block;
}

.front-title {
  padding-top:0.6em;
  padding-bottom:0.6em;
}

.flip-cards {
  display:flex;
}

.sbr-intro {
  margin-bottom:1em;
}

Upvotes: 0

Views: 1442

Answers (2)

omer blechman
omer blechman

Reputation: 386

You need to set width and height after flipping as well if you want different behavior.

I added attributes to following selector:

.flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner

Try the following CSS:

.flip-card {
    background-color: transparent;
    width: 19%;
    /* change the below */
    height: 120px;
    margin: auto;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner {
    transform: rotateY(180deg);
  width: 100%;
    height: 100%;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #008CCC;
    color: white;
    text-align: center;
    height: 100%;
}

.flip-card-back {
    background-color: #E7E7E7;
    color: black;
    transform: rotateY(180deg);
    /* change the below */
    height: 400px;
}

.flip-card-back ul {
    padding-left:1em;
    padding-right:1em;
    list-style-type:none;
}

.flip-card-back li {
    border-bottom: 1px solid black;
}

.flip-card-back li:last-child {
    border-bottom: none;
}

.flip-card-back h2 {
    text-align:center;
    background-color:black;
    color:white;
    padding-top:0.6em;
    padding-bottom:0.6em;
}

.flip-card-back h2 a, .flip-card-back h2 a:visited {
    color:white;
}

.flip-card-back a {
    display:block;
}

.front-title {
    padding-top:0.6em;
    padding-bottom:0.6em;
}

.flip-cards {
    display:flex;
}

.sbr-intro {
    margin-bottom:1em;
}

Upvotes: 1

doğukan
doğukan

Reputation: 27399

Just add height: auto; to .flip-card-front.

I also added pointer-events: none; to .flip-card and added pointer-events: auto; to .flip-card-front, .flip-card-back for hover bug.

.flip-card {
  background-color: transparent;
  width: 19%;
  /* change the below */
  height: 400px;
  margin: auto;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
  pointer-events: none;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner,
.flip-card:focus .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  pointer-events: auto;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #008CCC;
  color: white;
  text-align: center;
  height: auto;
}

.flip-card-back {
  background-color: #E7E7E7;
  color: black;
  transform: rotateY(180deg);
  /* change the below */
  height: 400px;
}

.flip-card-back ul {
  padding-left: 1em;
  padding-right: 1em;
  list-style-type: none;
}

.flip-card-back li {
  border-bottom: 1px solid black;
}

.flip-card-back li:last-child {
  border-bottom: none;
}

.flip-card-back h2 {
  text-align: center;
  background-color: black;
  color: white;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.flip-card-back h2 a,
.flip-card-back h2 a:visited {
  color: white;
}

.flip-card-back a {
  display: block;
}

.front-title {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.flip-cards {
  display: flex;
}

.sbr-intro {
  margin-bottom: 1em;
}
<div class="flip-cards">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <h2 class="front-title">Prepare Your Business</h2>
      </div>
      <div class="flip-card-back">
        <h2>Content</h2>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions