I have a "flippable" modal dialogue consisting of two divs (front and back):
<div class="modal-dialogue">
<div class="modal-content">
<div class="front">
<h1>Front</h1>
</div>
<div class="back">
<h1>Back</h1>
</div>
</div>
</div>
Using CSS transform I flip the modal over to reveal the back by adding the "flipped" class to the modal-content with:
.modal-content.flipped {
-webkit-transform: rotateY(180deg);
}
This all works fine... except when I add the overflow:hidden; property to the modal-content. Suddenly, the back div is not visible and instead the backface of the front div becomes visible (even though it has backface-visibility set to hidden).
This seems very strange. Why would setting the overflow property change the backface-visibility in this way?
You can see it in action in this fiddle: https://jsfiddle.net/amxp02mx/ . It works fine, but if you comment out line 31 in the CSS, making the overflow:hidden, it is broken.
Can anyone explain why?
document.querySelector(".modal-content")
.addEventListener("click", function () {
this.classList.toggle("flipped");
});
.modal-dialogue {
z-index: 1050;
display: block;
width: 25rem;
min-height: 30rem;
margin-left: -12.5rem;
margin-top: -15rem;
position: fixed;
left: 50%;
top: 50%;
-webkit-perspective: 800px;
}
.modal-content {
width: 25rem;
min-height: 30rem;
position: relative;
background-color: transparent;
border-radius: 10px;
outline: none;
transition: 0.8s ease;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
margin: 5rem auto 0 auto;
/* With overflow:hidden; the back of the panel is
not visible and the backface-visibility:hidden
stops working. Why? */
overflow: hidden;
/* With overflow: visible; it works fine. */
overflow: inherit;
}
.modal-content div {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
color: white;
font-size: 140px;
font-weight: bold;
text-align: center;
overflow: hidden;
}
.modal-content .front {
background: red;
z-index:0;
}
.modal-content .back {
background: blue;
-webkit-transform: rotateY(180deg);
z-index:-1;
}
.modal-content.flipped {
-webkit-transform: rotateY(180deg);
}
<div class="modal-dialogue">
<div class="modal-content">
<div class="front">
<h1>Front</h1>
</div>
<div class="back">
<h1>Back</h1>
</div>
</div>
</div>
you can see the explanation here in the documentation:
https://drafts.csswg.org/css-transforms/#grouping-property-values
also your issue is easily fixed by adding
overflow:hidden;
to the .modal-content div rule
https://jsfiddle.net/amxp02mx/4/
Related
I've been struggling to hover to work. All this should do is have a red container div and when you hover it, a black inner div drops down from the top to block the container. I must be doing something basic wrong here.
HTML:
<div class="container">
<div class="inner" />
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
background: black;
transition: max-height 2s ease-out;
overflow: hidden;
}
.container:hover .inner {
max-height: 200px;
}
As mentioned by Temani Afif, this was nothing more than missing a height.
I have a simple card flip animation which works well on the browsers I've tested.
However there is an issue on Safari when this card flip animation happens on top of another div which is also being animated. For some reason on Safari when the card flips it kind of disappears behind the "background div". I thought that maybe it's a z-index issue but from what I tried it is not.
To make the example simple the background div is grey. The idea is to have a glowing effect in the background.
Below is the example of the code that I have, I've tested this on Chrome, Firefox and Edge it's working fine, however on Safari when the card is flipped it disappears.
$(document).ready(function() {
$('button').click(function() {
$('.wrapper').toggleClass('flip');
});
});
.perspective {
perspective: 1000px;
margin: 50px;
position: relative;
width: 175px;
height: 250px;
}
.some-bg {
background-color: #ccc;
background-position: center;
width: 100%;
height: 100%;
position: absolute;
animation: test-bg-animation 1s infinite linear;
}
#keyframes test-bg-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.wrapper {
width: 125px;
height: 175px;
border: 1px solid blue;
position: absolute;
transform-style: preserve-3d;
transition: all 250ms;
top: 35px;
left: 25px;
}
.wrapper.flip {
transform: rotateY(180deg);
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
}
.back {
background-color: tomato;
}
.front {
background-color: #bada55;
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective">
<div class="some-bg"></div>
<div class="wrapper">
<div class="card-face front">Front</div>
<div class="card-face back">Back</div>
</div>
</div>
<button>Flip Me!</button>
You can fix this by nesting the .some-bg and the .wrapper div into absolute positioned divs with a relative positioned parent.
See this fiddle for an example:
https://jsfiddle.net/voLzv68w/
I'm trying to make a 3D card flipping effect with CSS like this.
The difference is that I want to use only CSS to implement it.
Here is the code I tried:
/*** LESS: ***/
.card-container {
position: relative;
height: 12rem;
width: 9rem;
perspective: 30rem;
.card {
position: absolute;
width: 100%;
height: 100%;
div {
position: absolute;
height: 100%;
width: 100%;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
backface-visibility: hidden;
transition: transform 1s;
&:hover {
transform: rotateY(180deg);
}
}
}
}
HTML:
<div class="card-container">
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
</div>
The issue is that the card doesn't flip, it snaps from back to front like this:
Is it possible to implement this 3d card flip on hover effect using only CSS?
I simplified the code to make it shorter and make the 3d card flip on hover. The card flips on the Y axis from the front face to the back face this is what it looks like:
Here is an example of a simple CSS only flipping card the flip animation is launched on hover :
.card {
position: relative;
width: 50vh;
height: 80vh;
perspective: 500px;
margin: 10vh auto 50vh;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(360deg);
}
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
Note that you will need to add vendor prefixes depending on the browsers you want to support. See canIuse for 3d transforms and transitions.
This is what I changed in your code for the flip effect:
the front face wasn't rotated on th Y axis on hover
the hover effect was launched when the .back div was hovered. This can create flickering as that div is rotating and "disapears" at mid rotation. It's better to launch the animation when the static parent is hovered.
the first parent isn't really usefull so I removed it
yes it can be done using CSS only and you can do by using CSS3 animation property. Here is example of flipping card animation.
<div class="container text-center">
<div class="card-container">
<div class="card">
<div class="front">
<span class="fa fa-user"></span>
</div>
<div class="back">User</div>
</div>
</div>
The CSS
.card-container {
display: inline-block;
margin: 0 auto;
padding: 0 12px;
perspective: 900px;
text-align: center;
}
.card {
position: relative;
width: 100px;
height: 100px;
transition: all 0.6s ease;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
background: #FEC606;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 5px;
color: white;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
backface-visibility: hidden;
}
.front {
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.back {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.card-container:hover .card {
transform: rotateY(180deg);
}
.back {
transform: rotateY(180deg);
}
You can also read this article about CSS Flip Animation on Hover
You can also find demo and download source from the article.
Safari fails to correctly render 180deg rotated element. In particular there are two examples when it can be shown (used Safari 9.1):
Issue with odd width. You can see (look at the border) that the bottom element is shifted 1px right against its parent div initially and shifts more on transition.
Issue with even width. It looks fine initially but also shifts 1px right on transition.
Here's css for even case (in odd it's just all widths and heights subtracted 1px):
.no-overflow-container {
width: 518px;
height: 368px;
margin: 10px;
overflow: hidden;
}
.container {
width: 368px;
height: 368px;
background: red;
margin-right: 30px;
-webkit-transition: margin 350ms;
-moz-transition: margin 350ms;
transition: margin 350ms;
}
.container:hover {
margin-left: 150px;
}
.threed-container {
width: 100%;
height: 100%;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
position: relative;
box-sizing: border-box;
}
.faced-item {
width: 100%;
height: 100%;
border: 1px solid black;
font-size: 28px;
position: absolute;
padding: 30px;
box-sizing: border-box;
}
.rotated-item {
width: 100%;
height: 100%;
border: 1px solid black;
font-size: 28px;
position: absolute;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
}
And HTML:
<div class="no-overflow-container">
<div class="container">
<div class="threed-container">
<div class="faced-item">
HELLO WORLD FACE
</div>
</div>
</div>
</div>
<div class="no-overflow-container">
<div class="container">
<div class="threed-container">
<div class="rotated-item">
HELLO WORLD BACKFACE
</div>
</div>
</div>
</div>
It works quite fine in Chrome(52) and Firefox(47).
So any suggestions about how to fix it in Safari?
I solved this using will-change: transform; (Safari 10)
https://jsfiddle.net/4hocy9qt/2/
take a look at backface-visibilityproperty, it could solve your issue:
backface-visibility: hidden;
https://css-tricks.com/almanac/properties/b/backface-visibility/
I'm trying to emulate the hover effect you can see here:
http://www.timeout.com/newyork (When you hover on the articles.)
I understand how to make a div move on :hover, what I don't understand is how they've hidden the "read more" button until the div is hovered over.
Essentially I would like to know how to hide a div until mouse over, then have it slide out from under another.
Here is a pure CSS solution I quickly hacked up: CSS Hover Effect
h1, h2, h3, h4, h5{
margin:0px;
}
.tile{
overflow: hidden;
width: 400px;
height:350px;
}
.tile:hover > .body{
transition: all 0.5s ease;
top: -3em;
}
.body{
transition: all 0.5s ease;
background-color: #333;
margin:0px;
color: #fafafa;
padding: 1em;
position:relative;
top: -1em;
}
<div class="tile">
<img src="http://lorempixel.com/400/300">
<div class="body">
<h2>Test Header</h2>
<p>Info to display</p>
</div>
</div>
Basically, I just change the position of the text div when I hover over the main div and add a transition animation to it.
They coukd change the maxHeight ...
.read_more {
maxHeight: 2px;
overflow:hidden;
}
.read_more:hover {
maxHeight: 30px;
}
See if this simple example helps:
.main{
width: 300px;
height: 300px;
position: relative;
background:yellow;
overflow:hidden;
}
.hovered{
width: 100%;
height: 64px;
background: gray;
position: absolute;
bottom: -28px;
}
.hovered span{
background: red;
color: #fff;
display:block;
width: 100%;
padding: 5px 0;
}
.main:hover .hovered{
bottom: 0;
}
https://jsfiddle.net/4zak8bfp/
You can do it using some jQuery addClass() and removeClass() methods.
Here is an example:
HTML:
<div class="wrapper">
<div class="caption">
<H1>This is a title</H1>
<p>
This is sample contents...
</p>
<div class="read-more-wrapper">
Read More
</div>
</div>
</div>
CSS:
.wrapper{
position: relative;
width: 450px;
height: 250px;
background-color: #2f89ce;
overflow: hidden;
}
.caption{
display: block;
position: absolute;
bottom: -30px;
width: 100%;
height: auto;
background-color: #fff;
transition: all ease-in-out 0.3s;
}
.read-more-wrapper{
background-color: #d03134;
height: 30px;
}
.slidein{
bottom: 0;
transition: all ease-in-out 0.3s;
}
JQuery:
$('.wrapper').on('mouseenter', function(){
$(this).find('.caption').addClass("slidein");
}).on('mouseleave', function(){
$(this).find('.caption').removeClass('slidein');
});
Here is the fiddle:
https://jsfiddle.net/bk9x3ceo/2/
Hope that helps.