I'm brand new here so I hope my question makes sense.
I need to adjust the hovering system for my images. I have 2 - front and back. When the user hovers (clicks on mobile) on the front it should display the back. When the cursor leaves the element it should display the front again.
This doesn't work on mobile. When the user clicks on the front, the back appears but then he/she has to click outside of the element to display the front again.
How can I make it that users can keep clicking on the image element to display the front and then the back?
Here's my code:
.flip-card {
background-color: transparent;
width: auto;
height: auto;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://petlifetoday.com/wp-content/uploads/2019/07/new-kitten-750x500.jpg" alt="Avatar" >
</div>
<div class="flip-card-back">
<img src="https://i.pinimg.com/originals/52/73/c8/5273c86755b215c1f3b4fac7bbad935c.jpg" alt="Avatar" >
</div>
</div>
</div>
Thank you
Use :focus where you set :hover
Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
Related
I have an app that has a two-sided HTML element. When a user clicks a button, I want to "flip" the element. I've been trying to get it to work as shown here. That example includes the following HTML, CSS, and JavaScript.
HTML
<div id="myApp">
<div class="flip-card">
<div class="flip-card-inner">
<div :class="{ 'flip-card-front':true, 'flipped':!isFlipped }">Side A</div>
<div :class="{ 'flip-card-back':true, 'flipped':isFlipped }">Side B</div>
</div>
</div>
<button #click="onButtonClick">Flip</button>
</div>
CSS
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform: rotateY(180deg);
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flipped {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
JavaScript
const MyApp = {
data() {
return {
isFlipped: false
}
},
methods: {
onButtonClick() {
this.isFlipped = true;
}
}
}
Vue.createApp(MyApp).mount('#myApp');
There doesn't appear to be any errors. It's just not behaving as I'd expect. Everything looks correct. How do I get the card to flip when someone clicks the button?
UPDATE
This example cleared it up.
Your class is being applied as expected, but you have a CSS specificity problem.
Increase specificity like this:
.flip-card-front.flipped {
transform: rotateY(180deg);
}
Try to replace below code.
this.isFlipped = true;
To
this.isFlipped = !this.isFlipped;
I am helping a friend with a basic html/css site and we are having trouble with setting up a flip card effect.
You can see it here: https://www.fragranceadvisorjobs.com/
Those tiles in the middle section flip when hovered over and reveal information about the brand.
It seems to be working just fine on desktop and using Chrome's responsive viewer.
However, when I visit the site on my mobile device (ios), it does the flip effect but doesn't show whats on the back of the card.
.flip-card {
background-color: transparent;
width: 32%;
display: inline-block;
height: 200px;
perspective: 1000px;
padding-left: 1px;
padding-right: 1px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
color: black;
}
.flip-card-back {
background-color: #000;
color: #fff;
transform: rotateY(180deg);
}
#media (max-width: 768px) {
.flip-card {
height: 180px;
}
}
#media (max-width: 425px) {
.flip-card {
width: 98%;
height: 150px;
}
}
<div class="flip-card">
<div class="flip-card-inner" style="background-color: #000">
<div class="flip-card-front">
<div class="logo_rowthird" ><img src="https://www.fragranceadvisorjobs.com/images/logos/lorealwhite.svg" alt="atelier" style="max-height: 80px;" class="shadow"></div></div>
<div class="flip-card-back">
<h1>L'Oreal Luxe</h1>
<p>“L’Oréal Luxe opens a unique world of beauty. Its international brands incarnate all the facets of elegance and refinement in three major specializations: skin care, make-up and perfume.</p>
</div>
</div></div>
I have created a code pen with the coding we have used for this set up
https://codepen.io/MarioDidIt/pen/rNxQVaw
Whats weird is the code in the code pen is exactly whats on the site, and it works on the site just fine but in the code pen it doesn't reveal anything for the back side. Im guessing code pen is reading it the same way the ios browser does.
Does anyone know what I can do to fix this issue? Any help is greatly appreciated!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<h1>Card Flip with Text on Back</h1>
<h3>Hover over the image on a desktop to see the back</h3>
<h3>Click on the image on mobile to see the back</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://via.placeholder.com/300" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Content Header</h1>
<p>Content Part I</p>
<p>Content Part II</p>
</div>
</div>
</div>
</body>
</html>
This should hopefully help. :-)
I am having a weird issue. This only happens on the initial card flip.
I have text that shows on top of a gradient background. This background image shows on mouse hover.
The text takes a split second to show and then it just pops in. I need the text to already be there when the image is flipped or at least have a smooth transition in if this isn't possible. I have traced it down to the placement of the text in different corners of the image. If I remove the css for the placement of the text then it shows and works fine.
Here is the Html
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img [src]="sanitizer.bypassSecurityTrustUrl('data:'+image.mimeType+';base64, '+image.frontImage)" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back linear-gradient">
<h1 class="info">{{getTitle()}}</h1>
<p class="info-bottom-right">{{getTitle()}}</p>
<p class="info-bottom-left">{{getTitle()}}</p>
</div>
</div>
</div>
Here is the css
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
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%;
text-align: center;
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 {
transform: rotateY(180deg);
cursor: pointer;
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
.info{
display: block;
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-weight: bold;
}
.info-bottom-right{
display: block;
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-weight: bold;
}
.info-bottom-left{
display: block;
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-weight: bold;
}
Here is a stackblitz showing the actual issue
https://stackblitz.com/edit/angular-eyo4a8-sura86?file=app%2Fdatepicker-date-class-example.css
It turns out this is a known bug with Chromium browsers - this thread finally shed some light on it. All you have to do is add preserve-3d to the front and back classes.
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
transform-style: preserve-3d;
}
The transition : transform 0.8s; applies also to the text so it adds a small delay to the text to appear when the cards flips. If you change it to 0.3s the card will flip faster but the text will also appear faster
I have some flip cards and when you hover over the flip card, the card flips and enlarges (scales). However I don't want to the text inside the hovered card to scale so I put the text inside a child div. (I only want the parent card background to scale).
How can I stop my text and content from scaling and going blurry? I've tried to reset my child div to 1/2 of the scale size to reset it but it does not work.
HTML
<div class="c-flip-card">
<div class="c-flip-card__inner">
<div class="c-flip-card__front"><img src="img_avatar.png" alt="Avatar"</div>
<div class="c-flip-card__back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
SASS
.c-flip-card {
background-color: transparent;
width: 180px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Do an horizontal flip when you move the mouse over the flip box container */
&:hover {
z-index: 10;
position: relative;
}
&:hover .c-flip-card__inner {
transform: rotateY(180deg) scale(1.4);
}
/* This container is needed to position the front and back side */
.c-flip-card__inner {
cursor:pointer;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Position the front and back side */
.c-flip-card__front, .c-flip-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.c-flip-card__front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg);
}
.abc{
transform: scale(0.7);
h1, p{
color:#000;
}
}
}
jsfiddle
Edit
I think I found a workaround : Don't use scale() !
.c-flip-card .c-flip-card__inner {
transition: all 0.8s;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) translate3d(40px,-40px,0);
/* Just change the width and height to 140% and have them transition
I used translate3d to position the card the same way scale() does */
width: 140%;
height: 140%;
}
And if you want to get the same positioning as scale() produce, you can add something like translate3d(40px,-40px,0) to your transform.
This way you don't have to manage the size of the text, the effect is the same (except for a little transition on the text position), and there is no bluriness.
.c-flip-card {
margin: 50px;
background-color: transparent;
width: 180px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.c-flip-card:hover {
z-index: 10;
position: relative;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) translate3d(40px,-40px,0);
width: 140%;
height: 140%;
}
.c-flip-card .c-flip-card__inner {
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all 0.8s;
transform-style: preserve-3d;
}
.c-flip-card .c-flip-card__front,
.c-flip-card .c-flip-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.c-flip-card .c-flip-card__front {
background-color: #bbb;
color: black;
}
.c-flip-card .c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg);
}
<div class="c-flip-card">
<div class="c-flip-card__inner">
<div class="c-flip-card__front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="c-flip-card__back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
Original
Putting the content of your back card inside a div and applying scale(0.7) on it seems to work but it really doesn't look good on the first hover.
<div class="c-flip-card__back">
<div class="notScale">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
.c-flip-card:hover .notScale {
transform: scale(0.7);
}
So instead of applying transform on your text, since it's only shown on hover, why not simply change the font size for exemple using calc() and variables :
/* define variables for p and h1 */
body {
--sizeP : 16px;
--sizeH1 : calc(2.5 * var(--sizeP));
}
/* apply those variable one "regular" h1 and p */
h1 {
font-size: var(--sizeH1);
}
p{
font-size: var(--sizeP);
}
/* "scale" down the text for the backside by a factor of .7 */
.c-flip-card .c-flip-card__back h1{
font-size: calc(.7 * var(--sizeH1));
}
.c-flip-card .c-flip-card__back p{
font-size: calc(.7 * var(--sizeP));
}
For the blury part I did get some imporvement (though it's not enough for chrome) by adding :
.c-flip-card {
-webkit-filter: blur(0);
filter: blur(0);
}
body {
--sizeP: 16px;
--sizeH1: calc(2.5 * var(--sizeP));
}
h1 {
font-size: var(--sizeH1);
}
p {
font-size: var(--sizeP);
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.c-flip-card {
margin: 50px;
background-color: transparent;
width: 180px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Do an horizontal flip when you move the mouse over the flip box container */
/* This container is needed to position the front and back side */
/* Position the front and back side */
/* Style the front side (fallback if image is missing) */
/* Style the back side */
-webkit-filter: blur(0);
filter: blur(0);
}
.c-flip-card:hover {
z-index: 10;
position: relative;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) scale(1.39);
}
.c-flip-card .c-flip-card__inner {
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.c-flip-card .c-flip-card__front,
.c-flip-card .c-flip-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.c-flip-card .c-flip-card__front {
background-color: #bbb;
color: black;
}
.c-flip-card .c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg);
}
.c-flip-card .c-flip-card__back h1 {
font-size: calc(.7 * var(--sizeH1));
}
.c-flip-card .c-flip-card__back p {
font-size: calc(.7 * var(--sizeP));
}
<div class="c-flip-card">
<div class="c-flip-card__inner">
<div class="c-flip-card__front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="c-flip-card__back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
For chrome I tried every solution from here and here but wasn't able to get a descent result.
The only one that worked for the blury part on chrome was :
#supports (zoom : 140%) {
.c-flip-card:hover {
zoom : 140%;
transform: translate3d(-40px,-40px,0);
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) scale(1);
}
.c-flip-card .c-flip-card__back h1{
font-size: calc(var(--sizeH1));
}
.c-flip-card .c-flip-card__back p{
font-size: calc(var(--sizeP));
}
}
But I wasn't able to transition the property zoom so the effect isn't great.
I followed Amarjits solutions and added scale:1.1 to .c-flip-card__back and this is the best result, however it is blurry using Saffari
.c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg) scale(1.1);
}
I found a better solution. Just don't use scaling on the back card, so the animation just tweens as the front card fades out it just shows the back card
This transitions around half way creates the illusion of it scaling when in fact it's just showing a div at set height and width.
It works in Chrome and Saffari and text is not blurry
.mycont{
/* How pronounced should the 3D effects be */
perspective: 500;
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
-o-perspective: 500;
width:100%;
height:245px;
position:relative;
/*Some UI */
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
font-size:28px;
line-height:150px;
vertical-align:middle;
cursor:pointer;
}
.box-front,.box-back{
/* Enable 3D transforms */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
width:100%;
height:100%;
position:absolute;
background-color:#0090d9;
/* Animate the transitions */
-webkit-transition:0.8s; text-align:center;
-moz-transition:0.8s; text-align:center;
-ms-transition:0.8s; text-align:center;
-o-transition:0.8s; text-align:center;
transition:0.8s; text-align:center;
color:#FFF;
border-radius:5px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
}
.box-back{
/* The back side is flipped 180 deg by default */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
background-color:#f35958;
}
.mycont:hover .box-front{
/* When the mycont is hovered, flip the front side and hide it .. */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
.mycont:hover .box-back{
/* .. at the same time flip the back side into visibility */
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
margin-left: -0%;
margin-top: -10%;
width: 300px;
height:430px;
}
<div style="width:300px; margin-top:100px; margin-left:100px;">
<div class="mycont">
<div class="box-front">Front :)</div>
<div class="box-back">
rtrtrtrt
</div>
</div>
</div>
I have a book that I created with transitions. Its created using 3 divs, one for the back with a class of back and two for the front. The first div for the front is for the front of the cover and other for the back of the cover. When you hover over the book the front flips open showing the div with a class of back and the back of the cover.
The issue is for a second the front of the cover, which is a blue div shows through to the back as its opening and closing-why is it doing this and how can I fix it?
*{
text-align: center;
line-height: 200px;
}
.book{
margin: 50px auto;
position: relative;
perspective: 300px;
perspective-origin: right bottom;
}
.book:hover .front{
transform: rotatey(-180deg);
}
.book .front{
transition: transform 1s ease-in-out;
transform-origin: left;
background-color: blue;
}
.book,.front,.front-front,.front-back,.back{
width: 130px;
height: 200px;
background-color: red;
transform-style: preserve-3d;
}
.front-front{
z-index:1;
background-color: blue;
}
.back{
z-index: -1;
}
.front-front,.front-back,.front{
}
.front-front,.front-back,.back,.front{
position: absolute;
}
.front-back{
transform: rotatey(180deg);
}
<div class="book">
<div class="front">
<div class="front-front">
front
</div>
<div class="front-back">
back
</div>
</div>
<div class="back">
back of book
</div>
</div>