I'm having a bit of brain block here and can't seem to figure this one out at the moment.
I have four flip-cards that flip down vertically on hover, currently. What I'm trying to achieve here is have the flip-cards flip down on page load, one at a time after the other, with no hover, and then once the fourth card has flipped down, reset all, and loop the same set of transitions over again, infinitely.
I'm sure it's some crystal clear answer that my brain is just not comprehending at the moment. I've tinkered around with it so much that I've just reset it back to hover.
P.S. sorry for the CSS mess I kinda let it go in my many attempts to find a solution. Any help is much appreciated!!
Here's the HTML:
<div class="flip-card1">
<div class="flip-card-inner1">
<div class="flip-card-front1">
</div>
<div class="flip-card-back1">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card2">
<div class="flip-card-inner2">
<div class="flip-card-front2">
</div>
<div class="flip-card-back2">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card3">
<div class="flip-card-inner3">
<div class="flip-card-front3">
</div>
<div class="flip-card-back3">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card4">
<div class="flip-card-inner4">
<div class="flip-card-front4">
</div>
<div class="flip-card-back4">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
And here's the CSS:
.flip-card1 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner1 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card1:hover .flip-card-inner1 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front1, .flip-card-back1 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front1 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back1 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
.flip-card2 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card2:hover .flip-card-inner2 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front2, .flip-card-back2 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front2 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back2 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner3 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card3:hover .flip-card-inner3 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front3, .flip-card-back3 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front3 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back3 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
.flip-card4 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner4 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card4:hover .flip-card-inner4 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front4, .flip-card-back4 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front4 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back4 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
Here it is in jsfiddle
use setInterval to add class for animation in sequnce and use jquery delay method to remove the same class after time.
use below code snippet for same logic.
NOTE : removed all hover selectors.
$(document).ready(function(){
var i = 0;
setInterval(function(){
$(".flip-card-inner"+ i).addClass("hoverit").delay( 1000 - (i*20) ).queue(function(){
$(this).removeClass("hoverit").dequeue();
});
if(i == 4) {
i = 0;
}
i++;
}, 1000);
});
.hoverit {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card1 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner1 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card-front1, .flip-card-back1 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front1 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back1 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
/*FLIP-CARD2 ANIMATION*/
.flip-card2 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card2:hover .flip-card-inner2 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front2, .flip-card-back2 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front2 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back2 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner3 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card-front3, .flip-card-back3 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front3 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back3 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
/*FLIP-CARD4 ANIMATION*/
.flip-card4 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner4 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card-front4, .flip-card-back4 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front4 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back4 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="flip-card1">
<div class="flip-card-inner1">
<div class="flip-card-front1">
</div>
<div class="flip-card-back1">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card2">
<div class="flip-card-inner2">
<div class="flip-card-front2">
</div>
<div class="flip-card-back2">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card3">
<div class="flip-card-inner3">
<div class="flip-card-front3">
</div>
<div class="flip-card-back3">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card4">
<div class="flip-card-inner4">
<div class="flip-card-front4">
</div>
<div class="flip-card-back4">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
Are you trying to do this with just CSS? If so you could use keyframes to create the 'auto-flip' effect. Here's the updated fiddle, it seems to break the hover state. If you also need the hover state you may need to use JS. Which I can help with as well. Edit: In the fiddle I change the transition origin to center. I just thought it looked better with the animation.
#keyframes flip {
0% {
transform: rotatex(0deg)
}
25% {
transform: rotatex(-180deg)
}
50% {
transform: rotatex(0deg)
}
100% {
transform: rotatex(0deg)
}
}
Related
I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
I have the following code:
scroll {
left: 50%;
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s;"></scroll>
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite;"></scroll>
This is basically a scroll button and on my end the output is looking like this:
As you can see the alignment of the scroll button is slightly off and I would like it to be right on top of the MY STORY text or be centered. How would I achieve this task?
The code of the MY STORY text is as follows:
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div class="section-title">
<h2>My Story</h2>
</div>
How would I achieve this task?
Basically, the scroll button should be right on top of the text
Notice that your .section-title's pseudo-elements have their left property set using calc and taking into account half of each element's width:
.section-title h2::before {
...
width: 120px;
...
left: calc(50% - 60px);
}
.section-title h2::after {
...
width: 40px;
...
left: calc(50% - 20px);
}
But the left property in your scroll declaration does not use calc. Therefore one possible fix would be to use it. Since each scroll element has a width of 2em, half of it would be 1em. So:
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
See demo below.
#container {
position: relative;
height: 5em;
}
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div id="container">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
<div class="section-title">
<h2>My Story</h2>
</div>
PS.: Unless you're using this positioned layout for browser compatibility reasons, you probably should consider using more modern layout modules, such as flexbox or grid, your life would be much easier.
I have search on the topic about restarting animation and that can be done by remove and add class again. But when I test it myself with the same method, I found that it doesn't work in many browsers. It only work in Edge. Is there something I did wrong?
here is the html:
function(elem) {
elem.classList.remove("animation");
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";},1)
}
div.wrapperL {
float: left;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;
}
div.wrapperLeft {
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey;
}
div.animation {
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;
}
#-webkit-keyframes transformOuter {
0% {background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% {width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}
}
<div class = "wrapperL">
<div class= "wrapperLeft" onclick = functionAnime(this)></div>
</div>
I also have another keyframe without -webkit- but same thing inside.The animation do trigger once in chrome but when I click again, nothings happen.
You have to remove style as well same as you did with class see working example: And yes your function name was incorrect I assumed it was a typo.
function functionAnime(elem) {
elem.classList.remove("animation");
elem.style = '';
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";
},100)
}
div.wrapperL{
float: left ;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;}
div.wrapperLeft{
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey; }
div.animation{
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;}
#-webkit-keyframes transformOuter{
0% { background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% { width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}}
<div class = "wrapperL">
<div class= "wrapperLeft animation" onclick = functionAnime(this)></div>
</div>
When hover inside circle (yellow) outside border (height and width) need to be increased (animate) from the center and circle (yellow) in the center position inside border
{
background-color: yellow;
border-radius: 50%;
border: 1px solid grey;
padding: 10px;
}
.circle {
position: absolute;
border: 5px solid #000;
border-radius: 50%;
width: 40px;
height: 40px;
transition: width 0.5s, height 0.5s;
}
.circle:hover {
width: 60px;
height: 60px;
}
<div class="circle">
<span><a><i class="icon_social fa fa-facebook-square"></i></a></span>
</div>
you can write css i.e
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.circle {
border-radius: 50%;
height: 40px;
margin-top: 20px;
position: relative;
transition: all 0.5s ease 0s;
width: 40px;
}
.circle::before {
border: 4px solid #000;
border-radius: 50%;
bottom: 0;
content: "";
height: 100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
width: 100%;
}
.circle:hover::before {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.circle span {
display: block;
height: 100%;
text-align: center;
vertical-align: middle;
width: 100%;
}
.circle a {
left: 50%;
margin: auto;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
}
i {
background-color: yellow;
border: 1px solid grey;
border-radius: 50%;
display: block;
padding: 10px;
text-align: center;
vertical-align: middle;
}
<div class="circle">
<span><a><i class="icon_social fa fa-facebook-square"></i></a></span>
</div>
It may help you..!
* {box-sizing: border-box;}
.holder {position: relative; display: inline-block; padding: 10px; border-radius: 50%; margin: 100px;}
.circle {position: absolute; top: 0px; left: 0px; border: solid 5px #000; width: 100%; height: 100%; border-radius: 50%; transition: all 0.3s ease;}
i {background: yellow; padding: 10px; border-radius: 50%;}
.circle:hover {transform: scale(1.2);}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="holder">
<i class="fa fa-facebook-square"></i>
<div class="circle"></div>
</div>
I have one question about responsive left sidebar open close function.
I have created this DEMO from codepen.io
You can see in the demo there is a button (Click to show blue div). When you click this button then blue div will open from left side. It is ok but if you change your browser width < 800px then the .left div will displayed. After than if you click again (Click to show blue div) the blue div not opening, also at the same time if you change your browser width>880px then you can see the blue div still be opened because you clicked it before.
I want to make it when browser width<880px and when i click the (Click to show blue div) then i want to show blue div from left side.
How can i do that anyone can help me in this regard ?
HTML
<div class="test_container">
<div class="left">
<div class="left_in">Here is a some text</div>
<div class="problem-div">
<div class="proglem-div-in">
<!--Here is a some menu-->
</div>
</div>
</div>
<div class="gb" data-id="1" data-state="close">Click To Show Blue Div</div>
<div class="right">
<div class="bb"></div>
</div>
</div>
CSS
.test_container {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left {
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in {
z-index: 999 !important;
position: absolute;
float: left;
width: 100%;
height: 100%;
background-color: red;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa {
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius: 0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
}
.click_open_close {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
z-index: 999;
display: none;
}
.pp {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
}
.right {
display: block;
position: absolute;
width: 70%;
bottom: 0;
top: 0;
right: 0%;
background-color: pink;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gb {
cursor: pointer;
position: absolute;
left: 30%;
padding: 10px;
color: #fff;
background-color: black;
z-index: 9999;
}
.problem-div {
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: blue;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#media all and (max-width: 840px) {
.left {
left: -60%;
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close {
display: block;
}
}
JS
$(".gb").on('click', function() {
var id = $(this).data("id");
var state = $(this).data("state");
if (state === "close") {
$(this).data("state", 'open');
$(".problem-div").animate({
width: "100%"
}, 200).find(".proglem-div-in").animate({
width: "100%"
}, 200);
} else {
$(this).data("state", 'close');
$(".problem-div").animate({
width: "0%"
}, 200).find(".proglem-div-in").animate({
width: "0%"
}, 200);
}
});
The problem is with CSS, replace media query css with this CSS:
#media all and (max-width: 840px) {
.left {
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.click_open_close {
display: block;
}
}