So what I'm trying to make is a banner that has scale and transform like in this webpage: https://www.johannesfog.dk/
So the two landscape images overlap each other on hover.
This is how far I got:
<div class="container">
<div class="image1">
<a href="#">
<img src="">
</a>
</div>
<div class="image2">
<a href="#">
<img src="">
</a>
</div>
</div>
<script src=""></script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.container .image1 {
width: 50%;
overflow: hidden;
}
.container .image2 {
width: 50%;
overflow: hidden;
}
.container img {
width: calc(100% - (0px * 2));
}
.container .image1:hover {
transform: scale(1.5);
transform: translate(50%, 0%);
overflow: hidden;
transition: ease-in-out, transform .3s ease-in-out;
}
.container .image2:hover {
transform: scale(1.5);
transform: translate(-50%, 0%);
overflow: hidden;
transition: ease-in-out, transform .3s ease-in-out;
}
Right now the img only transform.
Related
I have created a flip board animation with CSS transitions, and it works fine in Chrome/Firefox/Edge, but in Safari it flickers a lot during the transition, but the final state is correct.
I thought it might be a problem with the z-index in the transitions, but when removing those the flickering is still there.
I have autoprefixer on so I don't think it's an issue with backface-visibility.
If you look at this codepen in both Chrome and Safari, you can see the how it's supposed to be in Chrome, and the flickering issue in Safari.
https://codepen.io/joel-udd/pen/QWpEQMM
<div class="board board-1">
<div class="row-1">
<div class="letter-wrapper">
<div class="behind-letter">
<div class="behind bottom"><span>F</span></div>
<div class="behind top">I</div>
</div>
<div class="letter">
<div class="flip front">H</div>
<div class="flip back"><span>I</span></div>
</div>
<div class="letter">
<div class="flip front">G</div>
<div class="flip back"><span>H</span></div>
</div>
<div class="letter">
<div class="flip front">F</div>
<div class="flip back"><span>G</span></div>
</div>
</div>
</div>
</div>
.board {
display: inline-block;
position: relative;
perspective: 1000px;
.letter-wrapper {
display: inline-block;
position: relative;
width: 11vw;
margin-left: 2px;
height: 14vw;
.flip, .behind {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 14vw;
span {
display: inline-block;
transform: translateY(-50%);
}
}
.letter {
display: inline-block;
position: absolute;
top: 2px;
width: 100%;
height: 7vw;
transform: rotateX(0);
transform-style: preserve-3d;
transform-origin: bottom center;
.flip {
height: 100%;
backface-visibility: hidden;
&.back {
transform: rotateX(180deg);
}
}
&:nth-child(2) {
z-index: 10;
}
&:nth-child(3) {
z-index: 20;
}
&:nth-child(4) {
z-index: 30;
}
}
.behind-letter {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
z-index: 5;
.behind {
height: 50%;
&.bottom {
top: calc(50% + 2px);
}
}
}
}
&.active {
.row-1 {
.letter-wrapper {
.letter {
transform: rotateX(-180deg);
&:nth-child(2) {
z-index: 50;
transition: transform .5s .5s, z-index 0s .6s;
}
&:nth-child(3) {
z-index: 40;
transition: transform .5s .3s, z-index 0s .4s;
}
&:nth-child(4) {
transition: transform .5s .1s;
}
}
}
}
}
}
Thanks!
I have the following snippet to illustrate this issue.
According to everything I have read, elements positioned using transformZ should be on top as they are 'closer.' I can't position the active/flipped card 'on top' using z-index because flickering occurs during the transition. Yet the elements are positioned in the default order of the browser, which means the later elements are on top. Transform-style and perspective are both applied to the parents.
Why aren't the closer elements on top?
.card {
position: relative;
width: 33.333%; height: 12rem;
float: left;
transform-style: preserve-3d;
perspective: 30rem;
}
.front, .back {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front{ transform: rotateY(180deg);}
.card:hover .back { transform: rotateY(360deg) translateZ(5em);}
.card2 {
position: relative;
width: 33.333%; height: 12rem;
perspective: 30rem;
float: left;
}
.front2, .back2 {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front2 {
background-color: #66ccff;
}
.back2 {
background-color: #dd8800;
transform: rotateY(180deg);
z-index: 99;
}
.card2:hover .front2 { transform: rotateY(180deg);}
.card2:hover .back2 { transform: rotateY(360deg) translateZ(5em);}
.card3 {
position: relative;
width: 33.333%; height: 12rem;
perspective: 30rem;
float: left;
}
.front3, .back3 {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front3 {
background-color: #66ccff;
}
.back3 {
background-color: #dd8800;
transform: rotateY(180deg);
z-index: 99;
}
.card3:hover .front3 { transform: rotateY(180deg);}
.card3:hover .back3 { transform: rotateY(360deg) translateZ(5em);}
<div class="card">
<div class="front">
<span>Front</span>
</div>
<div class="back">
<span>Back</span>
</div>
</div>
<div class="card2">
<div class="front2">
<span>Front</span>
</div>
<div class="back2">
<span>Back</span>
</div>
</div>
<div class="card3">
<div class="front3">
<span>Front</span>
</div>
<div class="back3">
<span>Back</span>
</div>
</div>
It's because the use of persepctive create a stacking context
Using this property with a value different than 0 and none creates a new stacking context. Also, in that case, the object will act as a containing block for position: fixed elements that it contains.ref
So what you said is all true but it happens inside the card element then the card elements are positionned considering the tree order.
An easy fix is to adjust z-index of card element considering some delay to avoid the bad effect.
.card {
position: relative;
width: 33.333%; height: 12rem;
float: left;
transform-style: preserve-3d;
perspective: 30rem;
z-index:0;
transition:z-index 0s .5s;
}
.front, .back {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front{ transform: rotateY(180deg);}
.card:hover .back { transform: rotateY(360deg) translateZ(5em);}
.card:hover {
z-index:1;
}
<div class="card">
<div class="front">
<span>Front</span>
</div>
<div class="back">
<span>Back</span>
</div>
</div>
<div class="card">
<div class="front">
<span>Front</span>
</div>
<div class="back">
<span>Back</span>
</div>
</div>
<div class="card">
<div class="front">
<span>Front</span>
</div>
<div class="back">
<span>Back</span>
</div>
</div
So this issue has been bugging me for quite a while. I have this div container that centers an overflow image to the center.
However in Safari, the icon inside the div is not positioned in the center. Instead it is at the top. It works fine in other browsers though. Only Safari has this bug.
I attached a fiddle below. Appreciate any help! :)
JSfiddle demo
var $container = $('#page');
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
percentPosition: true,
gutter: 10
});
#page .item {
width: calc(16.66% - 10px);
display: inline-block;
height: 0;
float: left;
padding-bottom: 16.66%;
overflow: hidden;
background-color: salmon;
margin: 5px;
position: relative;
}
#page .item.s1 {
width: calc(50% - 10px);
padding-bottom: 50%;
overflow: hidden;
background-color: navy;
}
.item > a {
/* position: relative; */
display: block;
overflow: hidden;
color: white;
}
.item:hover .grid-image:after {
background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.item:hover .item-caption {
opacity: 1;
z-index: 3;
visibility: visible;
}
.item-caption,
.grid-image > img,
.grid-image:after {
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.item-caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
text-align: center;
opacity: 0;
display: table;
height: 100%;
width: 100%;
}
.item-caption > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.grid-image {
position: relative;
overflow: hidden;
}
.grid-image img {
display: block;
overflow: hidden;
}
.grid-image:after {
position: absolute;
display: block;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="page">
<!-- GRID ITEM -->
<div class="item s1">
<a href="#">
<div class="grid-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
</div>
<div class="item-caption">
<div>
<h5>I want this to be center</h5>
</div>
</div>
</a>
</div>
<!-- /GRID ITEM -->
</div>
</div>
</body>
</html>
I'm trying to implement a flip on an image but its preserve 3d (or probably backface-visibility) is not working on ie11.
This solution didn't work for me: -webkit-transform-style: preserve-3d not working
Here is a pen for you to try stuff and also a fiddle: http://codepen.io/vandervals/pen/XbedKY?editors=110
.container {
-ms-perspective: 1500px;
perspective: 1500px;
}
.canvas {
position: relative;
width: 300px;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50% 0;
transition: transform 1s ease 0s;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
overflow: visible;
}
.canvas img {
max-width: 100%;
backface-visibility: hidden;
position: relative;
z-index: 2;
}
input:checked + .canvas {
transform: rotateY(180deg);
}
.red {
background: red;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
backface-visibility: hidden;
transform: rotateY(180deg);
}
<div class="container">
<input type="checkbox">
<div class="canvas">
<img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg">
<div class="red"></div>
</div>
</div>
<p>That checkbox over there</p>
Internet Explorer doesn't support preserve-3d in any version (probably Spartan will).
You need to change the way you have set the transforms if you want it to work (on the item directly instead of the container)
.container{
perspective: 1500px;
}
.canvas{
position: relative;
width: 300px;
transform-origin: 50% 50% 0;
transform-style: preserve-3d;
overflow: visible;
}
.canvas img{
max-width: 100%;
backface-visibility: hidden;
position: relative;
z-index: 2;
transition: transform 1s ease 0s;
}
input:checked + .canvas img {
transform: rotateY(180deg);
}
.red{
background: red;
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
z-index: 1;
backface-visibility: hidden;
transform: rotateY(180deg);
transition: transform 1s ease 0s;
}
input:checked + .canvas .red {
transform: rotateY(360deg);
}
<div class="container">
<input type="checkbox">
<div class="canvas">
<img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg">
<div class="red"></div>
</div>
</div>
<p>That checkbox over there</p>
I am trying to perform a CSS3 transform transition on an image at the mouse-hover.
This image has a border-radius that disappear after the animation ( In Chrome ) .
here is the html:
<div class="inner">
<a class="imgLink" href="item.iframe.htm" target="_top">
<img src="myimage.jpg" alt="">
<span class="imgLinkOverlay"> </span>
</a>
</div>
and the css:
.inner {
margin: 0.75em;
background: #FFF;
border-radius: 10px;
overflow: hidden;
position: relative;
zoom: 1;
}
.imgLink img {
width: 100%;
display: block;
position: relative;
-webkit-transition: -webkit-transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
}
.imgLink:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
Here can find the fiddle: http://jsfiddle.net/3x2ft/
FIxed!
I added this rule to .inner:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);