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>
Related
I was following along with this video about making a card flip effect: https://www.youtube.com/watch?v=OV8MVmtgmoY&ab_channel=ArjunKhara
Here is the code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>card flip</title>
<style>
.maincontainer {
position: relative;
width: 250px;
height: 320px;
}
.thecard {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 3s ease;
}
.thecard:hover {
transform: rotateY(180deg);
}
.thefront {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: yellow;
color: darkgrey;
border-radius: 20px;
text-align: center;
}
.theback {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: blue;
color: darkgrey;
text-align: center;
border-radius: 20px;
transform: rotateY(180deg);
text-align: center;
}
</style>
</head>
<body>
<div class="maincontainer">
<div class="thecard">
<div class="thefront">front of card</div>
<div class="theback">back of card</div>
</div>
</div>
</body>
</html>
Here is the front of the card:
Here is the back of the card when transform-style: preserve-3d; is enabled:
Here is the back of the card when transform-style: preserve-3d; is commented out:
On https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style it says:
transform-style: flat : Indicates that the children of the element are lying in the plane of the element itself.
transform-style: preserve-3d : Indicates that the children of the element should be positioned in the 3D-space.
But I am still confused. When I comment the line out(making it flat by default", why does the yellow card show it's back after hovering and rotating? Where is the blue card after the rotation? I don't quite understand what exactly it means for the children to be "lying in the plane of the element itself".
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 in quite a pickle...
So here is my situation, I want to make a moving animation when the mouse hovers over it.
When this happens, I would like text that is layered over this div to remain in the same position.
In my setup, I have a parent div that controls the yellow div inside it when the mouse hovers over it. Also inside the parent div is the text that I would like to position over the edge of the yellow div and remain static during the animation.
html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
css:
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
width: 100%
}
.yellow {
display: inline-block;
left: 20%;
height: 7%;
position: relative;
transition: transform 0.4s ease;
transform-origin: right;
transform: scaleX(0px);
width: 80%;
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
This is what it is making
No matter what I do I simply cannot find a way to put the text over the moving divider without it:
Not staying on the same x plane as the moving div
Being transformed with the moving div
Wish this is what you looking for. If you didn't want the text to move you should add position absolute to your yellow div and also relative position to your parent div. then you can position the yellow div as you want. Also, you should put the width: 80%; before your scaleX(0) so that transform can work and also you should give the scaleX transform, 0 as a value, not 0px.
Run the snippet to see the result.
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
position: relative;
padding: 10px;
}
.yellow {
position: absolute;
left: 20%;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 80%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
I have made a rough snippet for the use case please build on top of it.
.relative{
position:'relative';
width:150px;
height:50px;
}
.static{
position:absolute;
}
.hoverable{
width:100%;
height:100%;
background-color:yellow;
transition:transform 1s;
}
.hoverable:hover{
transform:translate(150px,0px);
}
<div class='relative'>
<div class='static'>Static Text</div>
<div id='yellow' class='hoverable'/>
</div>
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
/*added this class*/
.child-1 {
position: absolute;
z-index: 10;
}
#yellow-con {
background-color: #000000;
position: relative;
height: 25px;
}
.yellow {
position: absolute;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 100%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(1);
}
#yellow-con:hover b {
color: black;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div id="yellow-con">
<div class="child-1"><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
I would like to include the mouseover 'Shop Now' effect on my images, I used this code:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:
What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?
<!DOCTYPE html>
<html>
<style>
.container {
width:300px; /*edited here*/
height:300px;
/*this syntax is for html tags ONLY: style= "width:300px;height:300px;"*/
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
you used the wrong syntax for css. style= "width:300px;height:300px;" would be correct if it was in your html like so:
<div class = "container" style= "width:300px;height:300px;"></div>
but in css the style is already implied throught the tags so in css all you need to do is:
.container{
width:300px;
height:300px;
/*and so on*/
}
note: to avoid future problems learn about chrome's inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Few short notes:
U cannot use style= "width:300px;height:300px;" within css. Within your example, your first line should be:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:
<div class="container" style="width:300px;height:300px;">
You furthermore don't really have to call width and height both, since an image will scale automatically when it has one of these.
With all this being said, I believe this code solves your problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>
I'm having trouble limiting the to the screen width on some browsers on my website.
The website in question is: https://teamcob4lt.eu
I'm using a 1920x1080px screen. On FireFox I can't scroll to the right, which is good. However on Chrome and some mobile browsers I can scroll quite a lot to the right using middle mouse button leaving a big gap in the page. There is no horizontal scroll bar though. This is happening to other people using Chrome whom I've asked to test the site as well. I don't want to people able to scroll on the x-axis at all meaning the "Base Layers" should fill the width of the screen all of the time.
Is it related to the fact that some elements are transformed backwards 300px? I can't seem to fix the issue using overflow-x: hidden either. Chrome is also leaving a large white gap at the bottom of the page 100% of the time. Is this related?
Is there anyway to fix this so that I am not able to scroll to the right on the page at all on any browser?
Here is the code which is causing the issue:
/* Styles
--------------------------------------------- */
html {
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: Arial;
margin: 0;
padding: 0;
max-width: 100%;
overflow-x: hidden;
height: auto;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgb(255, 255, 255);
}
.info {
font-size: 2vw;
}
/* Parallax Base Styles
--------------------------------------------- */
.parallax {
height: 100vh;
-webkit-perspective: 300px;
perspective: 300px;
width: 100vw;
overflow-x: hidden;
}
.parallax__group {
position: relative;
height: 100vh;
width: 100vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
width: 100vw;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
background-size: cover;
}
/* Style the Groups
--------------------------------------------- */
#groupH {
z-index: 4;
}
#groupH .parallax__layer--base {
z-index: 1;
background: rgb(0, 0, 0);
height: 50%;
}
#groupH .parallax__layer--back {
z-index: 0;
background-color: rgb(0, 0, 100);
}
#group1 {
z-index: 4;
}
#group1 .parallax__layer--base {
z-index: 1;
background: rgb(0, 0, 0);
height: 50%;
}
#group2 {
z-index: 3;
}
#group2 .parallax__layer--base {
z-index: 1;
background: rgb(0, 0, 0);
height: 50%;
}
#group2 .parallax__layer--back {
z-index: 0;
background-color: rgb(0, 0, 200);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/parallax.css">
<title>Title</title>
</head>
<body>
<div class="parallax">
<div id="groupH" class="parallax__group">
<div id="header" class="parallax__layer parallax__layer--base info">
<div class="title">Header</div>
</div>
<div class="parallax__layer parallax__layer--back">
</div>
</div>
<div id="group1" class="parallax__group">
<div id="info1" class="parallax__layer parallax__layer--base info">
<div class="title">Base Layer 1</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div id="info2" class="parallax__layer parallax__layer--base info">
<div class="title">Base Layer 2</div>
</div>
<div class="parallax__layer parallax__layer--back">
</div>
</div>
</div>
</body>
</html>