I want to use z-index first time, and I have problem with it. I try to position the left leave (#ahorn) behind the .circle, but it appear just behind the text, not the background. How can I achieve this? The animation is secondary now, not so important yet. The positioning is my big problem and the primary requirement.
screenshot
/* NOTE: top */
#top {
background: url(../img/top.jpg) bottom left no-repeat;
min-height: 700px;
text-align: center;
color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
.circle { /* NOTE: kellenek még a falevelek */
float: right;
background: #FDAB3B;
width: 500px;
height: 500px;
margin: 20px auto;
border-radius: 50%;
border: 5px dashed #fff;
box-shadow: 0 0 0 10px #FDAB3B;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
/* NOTE: falevelek animáció */
#ahorn2 {
position: absolute;
top: -30px;
right: 0;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
}
#ahorn {
position: absolute;
top: 20px;
left: -50px;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
z-index: -1;
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<section id="top">
<div class="center-box">
<div class="circle">
<div class="caption-text">
<h1>Őszi<br>specialitások</h1>
<p>sütőtökös pite<br>rebarbarás pite</p>
<a class="button" href="#">Rendelek</a>
</div>
<div id="ahorn2">
<img src="img/ahorn_2.svg" alt="">
</div>
<div id="ahorn">
<img src="img/ahorn.svg" alt="">
</div>
</div>
</div>
</section>
Just Remove the z-index from .circle
<html>
<head>
<style>
#top {
background: url(../img/top.jpg) bottom left no-repeat;
min-height: 700px;
text-align: center;
color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
.circle {
/* NOTE: kellenek még a falevelek */
float: right;
background: #FDAB3B;
width: 500px;
height: 500px;
margin: 20px auto;
border-radius: 50%;
border: 5px dashed #fff;
box-shadow: 0 0 0 10px #FDAB3B;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.caption-text {
z-index: 10;
font-size: 30px;
}
/* NOTE: falevelek animáció */
#ahorn2 {
position: absolute;
top: -30px;
right: 0;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
}
#ahorn {
position: absolute;
top: 20px;
left: -50px;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
z-index: -10;
}
.button {
background-color: #742D4D;
color: #fff;
padding: 5px;
text-decoration: none;
border: 3px solid #fff;
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<section id="top">
<div class="center-box">
<div class="circle">
<div class="caption-text">
<h1>Őszi<br>specialitások</h1>
<p>sütőtökös pite<br>rebarbarás pite</p>
<a class="button" href="#">RENDELEK</a>
</div>
<div id="ahorn2">
<img src="https://via.placeholder.com/200x200" alt="">
</div>
<div id="ahorn">
<img src="https://via.placeholder.com/200x200" alt="">
</div>
</div>
</div>
</section>
</body>
</html>
I find the answer right now. I must add to the grand-parent element(#top .center-box) a position:relative, and a z-index 10, the parent element(.circle) a z-index:initial, and the child(#ahorn) a z-index:-1. So it's work fine. Thanks for all!
answer found here
Related
Here's a codepen
I have this structure
body {
background-color: #1e1f26;
color: #fff;
font-size: 20px;
}
.card {
color: white;
width: 150px;
background-color: lightblue;
position: relative;
z-index: 0;
height: 180px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 0 rgba(#000, 0.5);
transition: box-shadow 0.3s;
}
.card .description {
background-color: rgba(#fff, 0.5);
height: 100%;
box-sizing: border-box;
padding: 10px;
transition: 0.3s;
opacity: 0;
transform: translateY(10%);
}
.card:hover .description {
opacity: 1;
transform: translateY(0);
}
.card .label {
display: block;
position: absolute;
width: 100%;
transform: rotate(-45deg);
text-align: center;
bottom: 15%;
right: -30%;
background: #f31;
}
<div class="card">
<div class="description">
Lalala
</div>
<div class="label">
LABEL
</div>
</div>
Label is rotated -45 deg
Description has opacity: 0 by default, but on hover is shown
This works perfectly fine in chrome, butt in safari label text gets glitchy or somewhat blurry during the description transition.
What can cause this? Is there a fix?
I am trying to add a sliding hover filter effect to image. My original filter is grayscale(1).
So I need to the filter to transition with direction instead of the Slider overlay effect to have it to become colored: "grayscale(0)".
Basically i want the filter to be affected.
Is it possible?
Thank you in advance.
* {
box-sizing: border-box;
}
body {
background: #fefefe;
color: #333;
font: 14px/1.5 "Fira Sans", sans-serif;
}
h1 {
font-size: 2.5rem;
font-weight: 300;
margin: 1.5em 0.5rem 1em;
text-align: center;
}
.container {
margin: 0 auto;
padding: 2rem;
max-width: 1200px;
}
.row {
display: flex;
}
.col {
color: #fff;
flex: 1 1 auto;
min-height: 260px;
position: relative;
}
.col h2 {
font-weight: 300;
font-size: 1.33333rem;
line-height: 1.25;
margin: 0;
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
z-index: 0;
}
.col:nth-child(2) {
min-width: 20%;
}
.col:nth-child(4) {
min-width: 33%;
}
.col:nth-child(3)+.col:nth-child(3) {
min-width: 50%;
}
.img-container {
background: #0f0523 50% 50%/cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: 1s;
transform-origin: bottom right;
filter: grayscale(1);
}
.img-container::before {
background: linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320);
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.col:hover .photo-container {
transform: scale(1.25);
}
.slide {
background: rgba(0, 0, 0, 0.4);
padding: 0 1.5rem;
}
/* THE EFFECT */
.col {
overflow: hidden;
position: relative;
}
.slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.275s ease-in-out, visibility 0s 0.275s;
visibility: hidden;
will-change: transform;
transform: translateY(100%);
}
.row:hover~.row .slide {
transform: translateY(-100%);
}
.row:hover .slide {
transform: translateX(100%);
}
.row:hover .col:hover~.col .slide {
transform: translateX(-100%);
}
.row:hover .col:hover .slide {
transform: none;
visibility: visible;
transition-delay: 0s;
}
<div class="container">
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=80);"></div>
<h2>1 </h2>
<div class="slide"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=212);"></div>
<h2>2 </h2>
<div class="slide"></div>
</div>
<div class="col">
<div class="img-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=242);"></div>
<h2>3 </h2>
<div class="slide"></div>
</div>
Here is an idea using mask where you can animate the mask-position. You can also rely on pseudo element for the image to avoid extra elements. The trick is to have two images above each other and we adjust the masking on the top to show the bottom one.
I removed the text to keep only the code related to the filter effect:
* {
box-sizing: border-box;
}
body {
background: #fefefe;
}
.container {
margin: 0 auto;
padding: 2rem;
max-width: 1200px;
}
.row {
display: flex;
}
.col {
color: #fff;
flex: 1 1 auto;
min-height: 260px;
position: relative;
}
.img-container {
background-size:0 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.img-container::before,
.img-container::after {
content: "";
background-image: inherit;
background-size:cover;
background-position:center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.img-container::before {
filter: grayscale(1);
}
.img-container::after {
transition: all 0.275s ease-in-out, visibility 0s 0.275s;
visibility: hidden;
-webkit-mask: linear-gradient(#fff,#fff);
-webkit-mask-size: 200% 200%;
-webkit-mask-position:left 0 bottom 200%;
-webkit-mask-repeat: no-repeat;
mask: linear-gradient(#fff,#fff);
mask-size: 200% 200%;
mask-position:left 0 bottom 200%;
mask-repeat: no-repeat;
}
.row:hover~.row .img-container::after {
-webkit-mask-position:left 0 top 200%;
mask-position:left 0 top 200%;
}
.row:hover .img-container::after {
-webkit-mask-position:right 200% top 0;
mask-position:right 200% top 0;
}
.row:hover .col:hover~.col .img-container::after {
-webkit-mask-position:left 200% top 0;
mask-position:left 200% top 0;
}
.row:hover .col:hover .img-container::after {
visibility: visible;
transition-delay: 0s;
-webkit-mask-position:0 0%;
mask-position:0 0%;
}
<div class="container">
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/1012/800/800);"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/1014/800/800);"></div>
</div>
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/16/800/800);"></div>
</div>
</div>
</div>
mask in this case works the same way as background so you can check this question/answer to get more details about the calculation: Using percentage values with background-position on a linear gradient
Changing mask with background to better see the trick:
* {
box-sizing: border-box;
}
body {
background: grey;
}
.container {
margin: 0 auto;
padding: 2rem;
max-width: 1200px;
}
.row {
display: flex;
}
.col {
color: #fff;
flex: 1 1 auto;
min-height: 260px;
position: relative;
}
.col:nth-child(2) {
min-width: 20%;
}
.col:nth-child(4) {
min-width: 33%;
}
.col:nth-child(3)+.col:nth-child(3) {
min-width: 50%;
}
.img-container {
background-position:center;
background-size:0 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: 1s;
transform-origin: bottom right;
}
.img-container::before {
background: inherit;
background-size:cover;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: grayscale(1);
}
.img-container::after {
content:"";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.275s ease-in-out, visibility 0s 0.275s;
visibility: hidden;
background: linear-gradient(#fff,#fff);
background-size: 200% 200%;
background-position:left 0 bottom 200%;
background-repeat: no-repeat;
}
.col {
overflow: hidden;
position: relative;
}
.row:hover~.row .img-container::after {
background-position:left 0 top 200%;
}
.row:hover .img-container::after {
background-position:right 200% top 0;
}
.row:hover .col:hover~.col .img-container::after {
background-position:left 200% top 0;
}
.row:hover .col:hover .img-container::after {
visibility: visible;
transition-delay: 0s;
background-position:0 0%;
}
<div class="container">
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/1012/800/800);"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/1014/800/800);"></div>
</div>
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/16/800/800);"></div>
</div>
</div>
</div>
Basically the white color is the visible part of the image, so sliding it will make our image without filter visible.
I have a problem that my transition does not get applied on an absolute positon child div.
Here is my codepen:
https://codepen.io/Data-Mastery/pen/oNvRdGv
On line 213 (&:hover .image) in the SASS file I want to scale the image and also set a filter, which works fine, but the transition-duration does not get applied.
If I just apply the hover statement on the parent element and not the image, the transition works fine. What is wrong here, can anyone help me?
Just add a transition to the .image class (or to the hover function, whatever you want to achieve)
&:hover .image {
transform: scale(1.1);
filter: grayscale(50%);
transition: your parameter;
}
Add transition property to the
& .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
transition:0.5s;
}
This will work for you
Why man , it works see this:-
#import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
#keyframes moveInLeft {
0% {
transform: translateX(-200px);
opacity: 0;
}
80% {
transform: translateX(10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInRight {
0% {
transform: translateX(200px);
opacity: 0;
}
80% {
transform: translateX(-10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInBottom {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.leftanimation {
animation: moveInLeft 1.2s forwards;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.4rem;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
p {
margin: 0.75rem;
}
.l-heading-light {
font-size: 3rem;
color: white;
padding-top: 3rem;
padding-bottom: 1rem;
}
.l-heading-dark {
font-size: 3rem;
color: #c2453b;
padding-top: 3rem;
padding-bottom: 1rem;
}
.primary-btn {
display: inline-block;
background: #c2453b;
color: #fff;
padding: 0.5rem 2rem;
font-size: 1.25rem;
border-radius: 20px;
transition: all 0.3s ease-in;
}
.primary-btn:hover {
background: #fff;
color: #c2453b;
transform: translateY(-3px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.primary-btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.navbar {
display: flex;
z-index: 1;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
top: 0;
padding: 1rem;
background: #333;
color: #fff;
}
.navbar__nav {
display: flex;
justify-content: space-between;
}
.navbar__nav li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
.navbar__nav li a:hover {
background: #fff;
border-radius: 5px;
color: #333;
}
.showcase {
background-image: linear-gradient(to bottom right, rgba(194, 69, 59, 0.4), rgba(178, 86, 65, 0.4)), url("https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg");
background-size: cover;
background-position: top;
height: 100vh;
position: relative;
}
.showcase__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-transform: uppercase;
}
.showcase__content p {
color: white;
font-size: 1.2rem;
margin-bottom: 1rem;
animation: moveInRight 1.2s forwards;
}
.showcase__content a {
animation: moveInBottom 1.2s 0.8s linear backwards;
}
#tours {
text-align: center;
background: #f7f7f7;
}
#tours .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
max-width: 1200px;
justify-content: space-between;
display: flex;
color: #fff;
}
#tours .container .card {
position: relative;
height: 35rem;
width: 20rem;
margin: 2rem 1rem;
padding: 0;
background: #b25641;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease-in-out;
overflow: hidden;
}
#tours .container .card:hover .image {
transform: scale(1.1);
filter: grayscale(100%);
transition-duration: 0.5s;
}
#tours .container .card .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
}
#tours .container .card__content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 15rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/style.css" />
<title>Malamar Hotels</title>
</head>
<body>
<nav class="navbar">
<h1 class="navbar__logo">
Malamar
</h1>
<ul class="navbar__nav">
<li>Home</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</nav>
<header class="showcase">
<div class="showcase__content">
<h1 class="l-heading-light leftanimation">
Hiking this fall
</h1>
<p>
Book the best hikings tours for this fall in beautiful areas across
europe
</p>
See our tours
</div>
</header>
<section id="tours">
<h1 class="l-heading-dark">Our best offers</h1>
<div class="container">
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Hiking</h1>
<p>2-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Rafting tour</h1>
<p>3-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Mountainbiking</h1>
<p>5-day tour</p>
Book now!
</div>
</div>
</div>
</section>
</body>
</html>
I have created a template which have the page divided in two sections, when I display the site in a desktop resolution all works well, but when I run the site on a smartphone I get the half circle on top and the divider between the two images, not responsive:
Essentially the half red circle, should be reduced in a smartphone resolution, and the divider goes outside the two images, this is what I tried so far:
#media (max-width: 800px) {
.divider{
top: 14.5%;
left: 50%;
height: 64.2%;
transform: translateX(-50%);
}
.circle{
top: -45%;
left: 50%;
width: 500px;
height: 400px;
border-radius: 50%;
}
.logo{
top: 0.5%;
left: 22.5%;
}
}
the problem's that this doesn't cover all the resolution case, so the problem is not fixed at all.
Is there a way to handle all the resolutions and make that template really responsive?
This is my fiddle.
SNIPPET:
body {
background-color: #ffffff;
}
/*Overlay*/
.hovereffect {
width: 50%;
height: 90vh;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #a7151f;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 50px 20px;
justify-content: center;
flex-direction: column;
display: flex;
}
.hovereffect img {
float: left;
width: 50%;
height: 90vh;
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 40px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
font-size: 16px;
}
/*DIVISORE*/
.middle {
position: absolute;
z-index: 9999;
}
.divider {
border-right: 5px solid #a7151f;
position: absolute;
z-index: 10;
top: 14.5%;
left: 50%;
margin: 0;
padding: 0;
width: auto;
height: 76.2%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
}
.circle {
z-index: 10;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.logo {
top: 2.5%;
position: absolute;
left: 41.5%;
width: 200px;
margin: 0 auto;
}
<link href="https://demos.creative-tim.com/material-kit-pro/assets/css/material-kit.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Site
</title>
</head>
<body class="sections-page sidebar-collapse">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="hovereffect">
<img class="first">
<div class="overlay">
<h2>First</h2>
<p>
Explore
</p>
</div>
</div>
<span class="divider"></span>
<img class="img-responsive center-block circle">
<span class="circle">
</span>
<img src="#" class="logo" style="z-index: 9999">
<div class="hovereffect">
<img class="second">
<div class="overlay">
<h2>Second</h2>
<p>
Explore
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center justify-content-xl-between">
<div class="col-6">
<div class="copyright text-center text-xl-left text-muted">
© 2019 Credit
</div>
</div>
<div class="col-6">
<div class="row">
Privacy Policy
Terms & Conditions
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
This kind of layout can be achieved with Flexbox with many fewer lines of code. Also, much less HTML markup is required.
Total responsiveness is achieved combining the flexbox behavior with relative units (%, vh, vw).
I put several comments in the CSS to explain what each rule is doing.
body { margin: 0; }
.the-container {
position: relative;
overflow: hidden;
height: 100vh; /* fill the screen */
width: 100vw; /* fill the screen */
}
.the-circle {
position: absolute; /* overlap the pics, removes it from the box flow */
background-color: #a7151f;
border-radius: 50%; /* rectangle becomes an ellipse */
width: 60vw;
height: 30vh;
top: -15vh; /* half of the height */
left: 0; /* these 3 lines... */
right: 0; /* ...keep the "circle"... */
margin: auto; /* ...centered at the top */
}
.the-image-wrapper {
display: flex; /* easy responsive columns */
height: 100%; /* fill the screen */
}
.the-image-wrapper > div {
flex: 1 0 auto; /* items inside the wrapper will grow to fit avilable space */
}
.the-image-wrapper > div.the-divider {
flex: 0 1 5px; /* this divider item will not grow, and will be 5px wide */
background-color: #a7151f;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="the-container">
<div class="the-circle"></div>
<div class="the-image-wrapper">
<div class="first"></div>
<div class="the-divider"></div>
<div class="second"></div>
</div>
</div>
Flip animation is not working correctly if it has some element inside with position property. This can be only reproduced on the first hover attempt after the page load.
Does anyone know why it has such behavior?
HTML:
<div class="parent">
<div class="card">
<div class="card__logo">
Logo
</div>
<div class="card__burger">
<div class="relative">Menu</div>
</div>
</div>
</div>
SCSS:
.card {
width: 90px;
height: 90px;
transition: transform 1s;
transform-style: preserve-3d;
&__logo,
&__burger {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
backface-visibility: hidden;
background: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
&__burger {
transform: rotateY(180deg);
}
}
.parent:hover {
.card {
transform: rotateY(180deg);
}
}
.relative {
position: relative;
}
Codeopen example
Update: I can reproduce this only in Chrome
I have different code but this will help you.
<style>
.flip-card {
background-color: transparent; width: 100px;
height: 100px; perspective: 1000px; margin-left:16%;
}
.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 {
background-color: #ffffff; color: black; z-index: 2;
}
.flip-card-back {
background-color: #ffffff; color: white;
transform: rotateY(180deg); z-index: 1;
}
.coninstallbtn { margin-top: 31%; margin-left: 20%; }
</style>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
Front View
</div>
<div class="flip-card-back">
Back View
</div>
</div>
</div>
</body>