How to fix to getting automatic flip on hover? - html

Question

I think something is not letting me get flip on hovering over the card.
I have tried .card:hover .front:hover and so many other but it is not working. Sorry been awake for 3 days cant wrap it, and i have the project due in couple of hours. it must be something i have been missing, if i could get some help id appreciate it
<div class="card">
<input type="checkbox" id="card" class="more">
<div class="content">
<div class="front" style="background-image: url()">
<div class="inner">
<h2></h2>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
<span>1</span>
</div>
<div class="info">
<span>2</span>
<div class="info">
<span>3</span>
</div>
<div class="description">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde?</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="type">Card</div>
<div class="button">
<a href='https://www.google.com/'><button>Link To Google</button></a>
</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
width: 300px;
height: 280px;
perspective: 1500px;
}
.card:hover {
transition: rotateY(180deg);
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner,
.back .inner {
height: 100%;
display: grid;
padding: 1.5em;
transform: translateZ(80px) scale(0.94);
}
.front {
background-color: #fff;
background-size: cover;
background-position: center center;
}
.front:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
background: linear-gradient(40deg, rgba(67, 138, 243, 0.7), rgba(255, 242, 166, 0.7));
}
.front .inner {
grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
justify-items: center;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #f0f0f0;
}
.back .inner {
grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
grid-template-columns: repeat(4, auto);
grid-column-gap: 0.8em;
justify-items: center;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #355cc9;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
content: '';
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 2em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info i:before {
background: linear-gradient(40deg, #355cc9, #438af3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
grid-row: 5;
grid-column: 1/-1;
font-size: 0.70em;
border-radius: 5px;
font-weight: 600;
line-height: 1.4em;
overflow: auto;
color: #355cc9;
padding-right: 10px;
}
.back .button {
grid-column: 1/-1;
justify-self: center;
}
.button {
grid-row: -1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
display: block;
padding: 0 1.5em;
height: 2em;
line-height: 2.0em;
min-width: 3em;
background-color: transparent;
border: solid 2px #fff;
color: #fff;
border-radius: 4px;
text-align: center;
left: 50%;
backface-visibility: hidden;
transition: 0.3s ease-in-out;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: none;
color: #355cc9;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}

Answer 1

So the fixes are:
you're using card as ID in HTML but in css it was used as class. I have changed HTML to class="card".
Moreover, rotateY(180deg) works with transform property.
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
width: 300px;
height: 280px;
perspective: 1500px;
}
.card:hover {
transition: width 2s, height 4s;
transform: rotateY(180deg);
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner,
.back .inner {
height: 100%;
display: grid;
padding: 1.5em;
transform: translateZ(80px) scale(0.94);
}
.front {
background-color: #fff;
background-size: cover;
background-position: center center;
}
.front:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
background: linear-gradient(40deg, rgba(67, 138, 243, 0.7), rgba(255, 242, 166, 0.7));
}
.front .inner {
grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
justify-items: center;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #f0f0f0;
}
.back .inner {
grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
grid-template-columns: repeat(4, auto);
grid-column-gap: 0.8em;
justify-items: center;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #355cc9;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
content: '';
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 2em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info i:before {
background: linear-gradient(40deg, #355cc9, #438af3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
grid-row: 5;
grid-column: 1/-1;
font-size: 0.70em;
border-radius: 5px;
font-weight: 600;
line-height: 1.4em;
overflow: auto;
color: #355cc9;
padding-right: 10px;
}
.back .button {
grid-column: 1/-1;
justify-self: center;
}
.button {
grid-row: -1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
display: block;
padding: 0 1.5em;
height: 2em;
line-height: 2.0em;
min-width: 3em;
background-color: transparent;
border: solid 2px #fff;
color: #fff;
border-radius: 4px;
text-align: center;
left: 50%;
backface-visibility: hidden;
transition: 0.3s ease-in-out;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: none;
color: #355cc9;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}
<div class="card">
<input type="checkbox" class="card" class="more">
<div class="content">
<div class="front">
<div class="inner">
<h2>Hello</h2>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
<span>1</span>
</div>
<div class="info">
<span>2</span>
<div class="info">
<span>3</span>
</div>
<div class="description">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde?</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="type">Card</div>
<div class="button">
<a href='https://www.google.com/'><button>Link To Google</button></a>
</div>
</div>
</div>
</div>
Hope this helps!