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. :-)
Related
I've been working on a site for a friend and I'm attempting to have the inserted image flip over (code below). It won't scale with the container it's in if I apply a card flip animation to it, but it scales perfectly as a plain old image. Is it possible to include the animation so it sits neatly within the box under the border?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: absolute;
width: 118.7%;
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%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #000000;
color: black;
}
.flip-card-back {
background-color: #000000;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<hr class="solid">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="image.png" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
</div>
</div>
</div>
</div>
</body>
</html>
I am making a website in which I need to showcase the specs of a product so I am using flip cards to do so. The problem is I am trying to add multiple cards, my first one works fine, but then everything after just molds into the first one making a huge mess. I tried "googling" answers and couldn't find any that would work with me.
My HTML Code
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="iPhone12Pro.png" alt="12pro" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>iPhone 12 Pro 5G</h1>
<p>6.1" Super Amoled Display</p>
<p>Good Cameras</p>
<p>A14, 5 Nanometer Chipset</p>
<p>Triple Camera Setup (UltraWide, Telephoto, Wide)</p>
<p>New Sqared Off Design</p>
<p>Price: $999 USD</p>
</div>
</div>
</div>
</div>
</div>
My CSS Code
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
padding-top: 20px;
padding-left: 50px;
}
.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: #bbb;
color: rgb(29, 27, 27);
transform: rotateY(180deg);
}
.flip-card-back h1 {
padding-top: 10%;
}
Any help would be greatly appreciated!
So first thing is that you just copied code from W3Schools and you copied it WRONG!
First HTML... you have 2 <div> more in your code then you are supposed to have.
Second thing is that your CSS total mess. Just use CSS that W3Schools gives you and everything works fine.
.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);
}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/200/300" alt="12pro" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>iPhone 12 Pro 5G</h1>
<p>6.1" Super Amoled Display</p>
<p>Good Cameras</p>
<p>A14, 5 Nanometer Chipset</p>
<p>Triple Camera Setup (UltraWide, Telephoto, Wide)</p>
<p>New Sqared Off Design</p>
<p>Price: $999 USD</p>
</div>
</div>
</div>
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
I've made a responsive image grid and am trying to add a hover effect to it so that the image gets a dark overlay and some text fades in on it. However, I've been having a tough time implementing it.
Here's my HTML structure.
<div class="tile">
<img src="some_image" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
And here's my CSS
.gallery .row .tile:hover ~ .tile img {
transform: scale(1.2);
}
However upon hovering over the image, it does not have the expected behaviour.
What's wrong?
EDIT
I got the hover effect to work and I can now fade in text.
Here's my code for that:
<div class="tile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
<div class="overlay">
<div class="text">Mahatma Gandhi</div>
</div>
</div>
CSS
.tile {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.8);
}
.tile:hover .overlay {
opacity: 1;
}
This seems to work but I think it doesnt have a certain "feel" to it. So I need to add a scale effect to the image. How can I do that
Here is a jsFiddle that i think will help you to resolve your issue: https://jsfiddle.net/mcs3yn1x/
HTML
<div class="tile">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
CSS
.tile {
border: 2px solid black;
}
.tile:hover img {
transform: scale(1.2);
}
Edit
After hearing alittle more about your issue I have created the following jsFiddle: https://jsfiddle.net/f1gzonjr/4/
HTML
<div class="tile">
<div class="container">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
</div>
CSS
.tile {
position: relative;
top: 0px;
left: 0px;
height: 300px;
width: 200px;
overflow: hidden;
border: 2px solid black;
}
.container:hover img{
transform: scale(1.2);
}
.overlay{
position: absolute;
display: none;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
}
.overlay p {
position: relative;
text-align: center;
color: #fff;
}
.tile:hover .overlay{
display: block;
}
Here is an alternate solution. Not sure if its what you wanted.
.tile:hover img, .tile.hover img {transform: scale(1.2);}
Here is the original answer that I adapted: Change background color of child div on hover of parent div?
-----EDIT-----
To stop it scaling and breaking responsiveness you will need to add a container around the image and then set overflow to none.
HTML:
<div class="tile">
<div class="img-container"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="animate"></div>
<div class="overlay">
<p>Mahatma Gandhi</p>
CSS:
.img-container{
width: 500px;
height: 500px;
overflow: hidden;
}
.tile:hover img, .tile.hover img {
transform: scale(1.2);
}
See the codepen below for an example
https://codepen.io/jamesCyrius/pen/pooqwwv
Here is a code
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 15px;
height: 15px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
<div class="zoom"></div>
i m flipping an image through CSS and its wirking in mozila.but in all other browsers its not working.i m unable to know what i m missing here.
Here is my code for image:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://placehold.it/300x300"/>
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
and Here is my CSS:
#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
</style>
You are using bleeding edge CSS properties.
transform, for example, only works unprefixed in IE 10, Firefox and Opera.
You can get support in webkit based browsers by duplicating the property with a -webkit- prefix (since the implementation is still considered experimental in that engine).
See also: can I use