I have a little issue with my SCSS code. I'm tired to put a card behind other, but just stack in the bottom of the parent container, I was trying to invert position parent from relative to absolute but isn't work I'm really stuck here.
.card {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 50rem;
&__side {
color: $color-white;
font-size: 2rem;
height: 50rem;
transition: all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem rgba($color-black, $alpha: .15);
&--front {
background-color: $color-white;
}
&--back {
transform: rotateY(180deg);
&-1 {
background-image: linear-gradient(to right bottom, $color-secundary-light, $color-primary-light);
}
}
}
&:hover &__side--front {
transform: rotateY(180deg);
}
&:hover &__side--back {
transform: rotateY(0);
}
}
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front"> Front </div>
</div>
<div class="card">
<div class="card__side card__side--back card__side--back-1"> Back </div>
</div>
</div>
Related
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
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>
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.
JSFiddle of my failed attempt
The idea is i have a nav bar, below it a footer. The links in the navbar have a featured image with them. When you hover the link, the image slides out from the nav bar.
This should be done CSS only.
HTML
<nav class="navigation">navbar
<div class="singleelement">
<div class="container">
<div class="title">
Some Title1
</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">
Some Title2
</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
<footer>somefooter text </footer>
CSS
.titlepicture{
background-color: green;
width: 300px;
height: 100px;
}
.title{
background-color: rgba(255, 235, 145, 0.60);
}
.container{
position: absolute;
-webkit-transition-property: all;
-ms-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1.4s;
-ms-transition-duration: 1.4s;
transition-duration: 1.4s;
}
.container:hover{
top: -100px;
}
.singleelement{
display: inline-block;
position: relative;
}
nav {
margin-top: 150px;
background: aliceblue;
}
Try something like this codepen. I've absolutely positioned the images and used css transforms to place them off-canvas, and transitions to bring them back in on hover. Something like this:
nav {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
nav .singleelement {
width: 50%;
height: 60px;
float: left;
text-align: center;
position: relative;
}
nav .singleelement .titlepicture {
width: 100%;
height: 200px;
background: red;
z-index: -2;
position: absolute;
top: 0;
left: 0;
transform: translate3d(0, -200px, 0);
transition: transform 0.25s ease;
}
nav .singleelement:hover .titlepicture {
transform: translate3d(0, 60px, 0);
}