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?
Related
When I animate a simple circle I get a weird flicker on the side - like something tryingh to push inside - and I can't figure out why. It also happens when I use keyframes to animate and on different browsers.
Any help appreciated.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%);
}
50% {
transform: scale(100%);
}
100% {
transform: scale(0%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
I think your problem is similar to this. CSS Animation break transform
Removing the transform(-50%, -50%) remove the flickering, so I centered your div in another way and it look's ok.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
display: flex;
}
.center {
margin: auto;
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%) translate(-50%,-50%);
}
50% {
transform: scale(100%) translate(-50%,-50%);
}
100% {
transform: scale(0%) translate(-50%,-50%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
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>
I want to create a "X" with css spans and position absolute, but the spans aren't centered even if they should.
The container has the font-size of 1px. and a height and width of 100em. Therefore I can use 1em as 1% of the parents size.
I used transform-origin: 0px 5em; on the span, to rotate it without changing the starting point. The Element starts in 20% top and left (20em) and ends in 80% (top and left).
To get the required width i simply calculated: Square root( square of (60) * 2) (Pythagorean theorem) (60 because start and end 20 -- 100-20*2)
But for some reason the X is clearly not centered. Do you know what i did wrong?
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 20em;
left: 20em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 20em;
left: 80em;
}
.check.red:hover span
{
width: 84.852813742em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
This isn't an automatic solution, but changing some values in your css i solved it:
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 18em;
left: 22em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 18em;
left: 78em;
}
.check.red:hover span
{
width: 78em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
There are a few things you can do to make life easier here.
Firstly you can transform origin using a percentage, which means you don't need to calculate it yourself.
You can also position using a percentage, then offset using a transform (again with a percentage) to center no matter the size.
You can also set the width of the cross using a percentage, which will take it size from its parent.
Update:
Change the cross to animate from the top, rather than the center by using background gradients.
.check
{
position: relative;
height: 200px;
width: 200px;
background-color: white;
border-radius: 50%;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 20px;
width: 0%;
background: linear-gradient(to right, white 50%, red 50%);
background-size: 200% 100%;
background-position: left bottom;
top: 50%;
left: 50%;
transform-origin: center;
transition: background 0.3s ease;
}
.check.red span
{
transform: translate(-50%, -50%) rotate(-45deg);
}
.check.red span:last-child
{
transform: translate(-50%, -50%) rotate(-135deg);
}
.check.red:hover span
{
background-position: right bottom;
width: 70%;
}
<div class="check red">
<span></span>
<span></span>
</div>
Try this
use margin-top:-0.5rem;
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s; margin-top:-0.5rem;
}
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s; margin-top:-0.5rem;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 20em;
left: 20em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 20em;
left: 80em;
}
.check.red:hover span
{
width: 84.852813742em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
I've tried creating a ripple effect on hover over with a button, the only problem I have is that the text shakes/rattles/shivers when I hover over it, I want it to stay still for a smooth transition. Any ideas on how to stop this?
a {
display: block;
position: relative;
width: 300px;
height: 50px;
background: rgba(0, 0, 255, .2);
text-decoration: none;
text-align: center;
overflow: hidden;
margin: 10% auto;
}
p,
span:first-of-type,
span:last-of-type {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
transition: all .3s;
}
span:first-of-type {
transition-delay: .1s;
z-index: 1;
}
span:last-of-type {
transition-delay: .2s;
z-index: 2;
}
span.cta {
color: #33C;
text-transform: uppercase;
font-family: Arial;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
display: block;
transition: color .3s;
z-index: 3;
}
a:hover p,
a:hover span:first-of-type,
a:hover span:last-of-type {
width: 110%;
height: 660%;
border-radius: 50%;
background: rgba(0, 0, 255, .2);
}
a:hover span:first-of-type,
a:hover span:last-of-type {
width: 100%;
height: 100%;
}
a:hover p span {
color: #FFF;
}
<a href="#">
<p>
<span></span>
<span class="cta">Shop the Trend</span>
<span></span>
</p>
</a>
N.B. It's fine in IE11, it happens in every other browser.
Here you go...Modified HTML[added button text inside div and applied new class "textCta" to it]
<span class="cta"><div class="textCta">Shop the Trend</div></span>
CSS
.textCta {
color:#33C;
text-transform:uppercase;
font-family:Arial;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
display: block;
transition: color .3s;
z-index: 3;
}
Demo
By deleting the p tags and placing the actual text within a div, I managed to stop the shivering and still keep the background effect the same.
Thanks to Nofi for their help.
<a href="#">
<span></span>
<div class="cta">Shop the Trend</div>
<span></span>
</a>