How overlap an image over a circle? - html

This is the circular effect I trying to reproduce. There is a grey circle and a animated spinning red reticle when hover over the picture.
I try with border-radius but didnt work.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
width: 111px;
height: 111px;
border-radius: 100%;
background-color: black;
background-position: 0px -555px;
}
.bg-Black_Panther {
width: 73px;
height: 111px;
background-position: 0px -777px;
}
.bg-Black_Widow {
width: 73px;
height: 111px;
background-position: 0px -888px;
}
.bg-Bullseye {
width: 73px;
height: 111px;
background-position: 0px -999px;
}
.bg-Cable {
width: 73px;
height: 111px;
background-position: 0px -1110px;
}
.bg-Captain_America {
width: 73px;
height: 111px;
background-position: 0px -1221px;
}
.bg-Captain_Marvel {
width: 73px;
height: 111px;
background-position: 0px -1332px;
}
.bg-Carnage {
width: 73px;
height: 111px;
background-position: 0px -1443px;
}
<div class="container">
<div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
<div>
<i class="sprite bg-Black_Panther"></i>
<b>Black Panther</b>
</div>
<div>
<i class="sprite bg-Black_Widow"></i>
<b>Black Widow</b>
</div>
<div>
<i class="sprite bg-Bullseye"></i>
<b>Bullseye</b>
</div>
<div>
<i class="sprite bg-Cable"></i>
<b>Cable</b>
</div>
<div>
<i class="sprite bg-Captain_America"></i>
<b>Captain America</b>
</div>
<div>
<i class="sprite bg-Captain_Marvel"></i>
<b>Captain Marvel</b>
</div>
<div>
<i class="sprite bg-Carnage"></i>
<b>Carnage</b>
</div>
</div>


You should use two separate img with transparent png.
Also, using CSS from here endless rotation you may animate the red circle.
Here is a working example
body {
background-color: black;
}
.character-container img {
position: absolute;
}
.circle {
top: 50px;
left: 30px;
}
.character {
left: 37px;
top: 26px;
}
/* FROM https://stackoverflow.com/questions/6410730/how-to-do-a-webkit-css-endless-rotation-animation */
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 20s linear infinite;
-moz-animation: rotating 20s linear infinite;
-ms-animation: rotating 20s linear infinite;
-o-animation: rotating 20s linear infinite;
animation: rotating 20s linear infinite;
}
<div class="character-container">
<img class="circle rotating" src="data:image/png;base64,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">
<img class="character" src="data:image/png;base64,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">
</div>


Sorry I cleaned it up a bit before working on it but I think positioning is the way to go.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
position: absolute;
bottom: 0;
left: 5px;
z-index: 2;
}
.bg-Ant_Man {
width:80px;
height: 111px;
background-position: 0px -555px;
}
.single-hero {
width: 80px;
height: 80px;
background-color: black;
overflow: visible;
border-radius: 50%;
position: relative;
margin-top: 50px;
}
.single-hero:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
opacity: 0;
background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");
background-position: center center;
background-size: cover;
animation: rotate 1s infinite linear;
transition: opacity .2s ease-in-out;
}
.single-hero:hover:after {
opacity: 1;
}
#keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="container">
<div>
<div class="single-hero">
<div class="hero-figure bg-Ant_Man"></div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
</div>


You can create an additional wrapper around the image and make the position of inner image absolute with a negative top property to get this effect. Here is the code with just one item:
.container {
padding: 50px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: #333;
color: #fff;
}
.hero {
text-align: center;
}
.circle {
width: 90px;
height: 90px;
border-radius: 100%;
background-color: black;
text-align: center;
position: relative;
border: 1px solid #ddd;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
position: absolute;
top: -20px;
left: 10px;
width: 111px;
height: 111px;
background-position: 0px -555px;
}
<div class="container">
<div class="hero">
<div class="circle">
<i class="sprite bg-Ant_Man"></i>
</div>
<b>Ant-Man</b>
</div>
</div>
Fiddle: https://jsfiddle.net/abhas9/4veot6xf/12/


Pseudo elements are my beloved when need minor decorating.
body {
background-color: #333;
}
img {
display: inline-block;
position: relative;
z-index: 9999;
}
.portrait {
position: relative;
}
.portait:after {
content: '';
display: block;
border: 3px solid #666;
width: 77px;
height: 77px;
border-radius: 50px;
position: absolute;
top: 37px;
left: 22px;
}
<div class="portait">
<img src="https://ae01.alicdn.com/kf/HTB1VSHlRxjaK1RjSZFA762dLFXaO.png" alt="">
</div>


Try this:
.container div::before {
content: "";
display: block;
position: absolute;
width: 72px;
height: 72px;
background: black;
border-radius: 50%;
z-index: 0;
top: 36px;
border: 1px solid white;
}
.container div, .container div * {
position: relative;
}
.bg-Ant_Man {
border-radius: 0;
background-color: none;
}


.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
position: absolute;
bottom: 0;
left: 5px;
z-index: 2;
}
.bg-Ant_Man {
width:80px;
height: 111px;
background-position: 0px -555px;
}
.single-hero {
width: 80px;
height: 80px;
background-color: black;
overflow: visible;
border-radius: 50%;
position: relative;
margin-top: 50px;
}
.single-hero:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
opacity: 0;
background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");
background-position: center center;
background-size: cover;
animation: rotate 1s infinite linear;
transition: opacity .2s ease-in-out;
}
.single-hero:hover:after {
opacity: 1;
}
#keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="container">
<div>
<div class="single-hero">
<div class="hero-figure bg-Ant_Man"></div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
</div>

Related

Why is rotating element not showing?

Trying to create a rotating "card". The cover, inside-left, and inside-right all work fine. The back however is giving me issues. I applied the same rules to each panel so I don't know where the bug is coming from.
.scene {
margin-top: 10em;
margin-left: 20em;
width: 20em;
height: 20em;
perspective: 40em;
}
.cube {
width: 100%;
height: 100%;
position: relative;
animation: spinning 12s infinite;
transform-style: preserve-3d;
transform-origin: left;
}
#keyframes spinning {
from {
transform: translateY(5em) rotateY(0deg);
}
to {
transform: translateY(5em) rotateY(-360deg);
}
}
.front-left {
width: 60%;
height: 100%;
position: absolute;
line-height: 10em;
text-align: center;
transform-origin: left;
}
.panel-1 {
width: 100%;
height: 100%;
border-style: solid;
position: absolute;
backface-visibility: hidden;
}
.cover {
background-color: blue;
}
.left {
background-color: red;
transform: rotateY(180deg);
}
.right-back {
width: 60%;
height: 100%;
position: absolute;
line-height: 10em;
text-align: center;
transform: rotateY(130deg);
transform-origin: left;
}
.panel-2 {
width: 100%;
height: 100%;
border-style: solid;
position: absolute;
backface-visibility: hidden;
}
.end {
background-color: blue;
transform: rotateY(180deg);
}
.right {
background-color: red;
}
<div class="scene">
<div class="cube">
<div class="front-left">
<div class="panel-1 cover">cover</div>
<div class="panel-1 left">inner left</div>
</div>
<div class="right-back">
<div class="panel-2 end">back</div>
<div class="panel-2 right">inner right</div>
</div>
</div>
</div>
here is a fiddle of the code. https://jsfiddle.net/7xtv90as/
I suspect it might be because a transform is applied to the parent container but I am not sure.

Strange bug with divs at same height overlapped with different z-index and with parent overflow hidden: border-bottom always is visible?

I created a speedometer that works very well and is to light (with CSS3,html and js code).
But i noticed a strange bug with iphone....
This is the CODE:
$('#first').addClass('first-start');
//SECOND BAR
$('#second').addClass('second-start');
setTimeout(function() {
$('#second').addClass('second-pause');
}, 400);
#page {
margin-top: 50px;
width: 300px;
height: 300px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 4;
overflow: hidden;
}
#box-first,
#box-second {
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-start;
z-index: 3;
overflow: hidden;
}
#first,
#second {
border-radius: 200px 200px 0 0;
margin: 0;
background: red;
width: 200px;
height: 100px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
#n1,
#n2 {
font-size: 20px;
color: #fff;
font-weight: bold;
position: absolute;
left: 50px;
right: 0;
text-align: center;
top: 50px;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100px;
height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
overflow: hidden;
}
#keyframes first {
0% {
background-color: green;
transform: rotate(180deg);
}
33% {
background-color: yellow;
transform: rotate(240deg);
}
66% {
background-color: orange;
transform: rotate(300deg);
}
100% {
background-color: red;
transform: rotate(360deg);
}
}
#keyframes second {
0% {
background-color: green;
transform: rotate(180deg);
}
33% {
background-color: yellow;
transform: rotate(240deg);
}
66% {
background-color: orange;
transform: rotate(300deg);
}
100% {
background-color: red;
transform: rotate(360deg);
}
}
.first-start,
.second-start {
animation: first 2s linear forwards;
}
.first-pause,
.second-pause {
animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<div id="box-first">
<div id="first"></div>
<div id="n1">1500</div>
</div>
<div id="box-second">
<div id="second"></div>
<div id="n2">270</div>
</div>
</div>
With iphone, so with safari, under (at the bottom side) div #n1 (the black div where there's number 1500) is visible a small white border or sometimes red (like #first).
And this is impossible because the container has overflow: hidden, all divs have different z-Index and the absolute position of #n1 is correct.
How is possibile ?
Thanks and sorry for my english
This is the jsfiddle: This is jsfiddle: https://jsfiddle.net/k85t9zgq/33/
This is a bug's screenshot:
THIS IS NEW "BUG" adding box-sizing:border-box
it seems to me that adding this new property not work the overflow:hidden property.
Is possible?

I cannot test this, but I am pretty sure it's related to the fact that background use background-clip border-box by default and this is somehow a rendring issue. A potential fix is to make the background far from the border by adding a small padding and adjusting background-clip
$('#first').addClass('first-start');
//SECOND BAR
$('#second').addClass('second-start');
setTimeout(function() {
$('#second').addClass('second-pause');
}, 400);
#page {
margin-top: 50px;
width: 300px;
height: 300px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 4;
overflow: hidden;
}
#box-first,
#box-second {
width: 200px;
height: 100px;
/* Changes*/
background: linear-gradient(#fff,#fff) content-box;
padding:1px;
box-sizing:border-box;
/**/
border-radius: 200px 200px 0 0;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-start;
z-index: 3;
overflow: hidden;
}
#first,
#second {
border-radius: 200px 200px 0 0;
margin: 0;
background: red;
width: 200px;
height: 100px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
#n1,
#n2 {
font-size: 20px;
color: #fff;
font-weight: bold;
position: absolute;
left: 50px;
right: 0;
text-align: center;
top: 50px;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100px;
height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
overflow: hidden;
}
#keyframes first {
0% {
background-color: green;
transform: rotate(180deg);
}
33% {
background-color: yellow;
transform: rotate(240deg);
}
66% {
background-color: orange;
transform: rotate(300deg);
}
100% {
background-color: red;
transform: rotate(360deg);
}
}
#keyframes second {
0% {
background-color: green;
transform: rotate(180deg);
}
33% {
background-color: yellow;
transform: rotate(240deg);
}
66% {
background-color: orange;
transform: rotate(300deg);
}
100% {
background-color: red;
transform: rotate(360deg);
}
}
.first-start,
.second-start {
animation: first 2s linear forwards;
}
.first-pause,
.second-pause {
animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<div id="box-first">
<div id="first"></div>
<div id="n1">1500</div>
</div>
<div id="box-second">
<div id="second"></div>
<div id="n2">270</div>
</div>
</div>

I believe it's your border-radius property on #first and #second - Play around with the values on it and you will totally see what I mean.
Change this:
#first,
#second {
border-radius: 200px 200px 0 0; /* ← CHANGE THIS */
margin: 0;
background: red;
width: 200px; /* ← CHANGE THIS TOO */
height: 100px;
transform: rotate(180deg);
transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
to:
#first,
#second {
border-radius: 0; /* ← THIS IS WHAT YOU WANT */
margin: 0;
background: red;
width: 100%; /* ← THIS IS ALSO WHAT YOU WANT */
height: 100px;
transform: rotate(180deg);
transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
That faint white/gray line around your speedometer is no longer present.
Cheers and Happy coding :)

How to stop Div's overlapping in mobile view

Hi I have two divs side by side - but when I change to mobile view they overlap, how can I stop this? Codepen - https://codepen.io/MarkHarrison/pen/NXNGgJ Thanks
box {
position: absolute !important;
left: 0;}
iframe{
border:10px solid transparent;
border-image-source:url(https://i.imgur.com/91tJ1qi.png);
border-image-slice:10;
width:500px;
height:300px;
display:block;
margin:auto;
}
.box {
position: relative;
margin: 0px;
display: block;
width: 600px;
height: 420px;
margin-top: 15%;

You may simply remove the .box class where there is the absolute position and let bootstrap restruct the content on small screens :
h1,
h2 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
padding-bottom: 100px;
}
body {
background: #2B2B2B;
}
.neon {
color: #fff;
text-shadow: 0 0 5px #F5D5D5, 0 0 10px #F2A7A7, 0 0 20px #F58484, 0 0 40px #FC5858, 0 0 80px #FF0F0F, 0 0 90px #F5D5D5, 0 0 100px #F2A7A7, 0 0 150px #F58484;
}
iframe {
border: 10px solid transparent;
border-image-source: url(https://i.imgur.com/91tJ1qi.png);
border-image-slice: 10;
width: 500px;
height: 300px;
display: block;
margin: auto;
}
.box {
position: relative;
margin: 0px;
display: block;
width: 600px;
height: 420px;
margin-top: 15%;
}
.face {
position: absolute;
height: 70%;
width: 40%;
left: 30%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 80% 80% 40% 40%;
}
.face-copy {
position: absolute;
height: 100%;
width: 100%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 80% 80% 40% 40%;
z-index: 2;
}
.ear-left {
position: absolute;
width: 15%;
height: 20%;
left: 5%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 50% 50% 90% 90%;
transform: rotate(-60deg);
z-index: 1;
}
.ear-right {
position: absolute;
width: 15%;
height: 20%;
left: 80%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 50% 50% 90% 90%;
transform: rotate(60deg);
z-index: 1;
}
.ear-inner {
bottom: 20%;
margin-top: 30%;
background: #8B4513;
width: 35%;
height: 80%;
margin-left: 32%;
border-radius: 70% 70%;
}
.eye-left {
position: absolute;
background: white;
width: 15%;
height: 13%;
left: 30%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.eye-right {
background: white;
width: 15%;
height: 13%;
position: absolute;
left: 55%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.eye-left-inner,
.eye-right-inner {
background: black;
width: 70%;
height: 70%;
border-radius: 50%;
margin-top: 25%;
z-index: 3;
}
.eye-left-inner {
margin-left: 20%;
}
.eye-right-inner {
margin-left: 10%;
}
.pupil {
position: absolute;
background: white;
width: 30%;
height: 30%;
z-index: 4;
border-radius: 50%;
left: 35%;
}
.nose {
position: absolute;
background: #603311;
width: 50%;
height: 30%;
border-radius: 50%;
margin-left: 25%;
z-index: 4;
margin-top: 65%;
}
.inner-nose {
position: absolute;
width: 85%;
margin-top: 1%;
height: 90%;
background: #8B4513;
border-radius: 50%;
border-top-right-radius: 45%;
transform: rotate(-10deg)
}
.horn-left,
.horn-right {
position: absolute;
margin-left: 15%;
margin-top: -80%;
width: 10%;
height: 80%;
background: #8B4513;
transform: rotate(-20deg);
border-radius: 70% 70% 50% 50% / 50% 50% 50% 50%;
}
.horn-left-bottom,
.horn-left-top,
.horn-left-middle,
.horn-right-bottom,
.horn-right-middle,
.horn-right-top {
background: #8B4513;
position: absolute;
width: 90%;
height: 35%;
transform: rotate(60deg);
margin-top: 500%;
margin-left: 108%;
border-radius: 0.5em 2em 0.5em 2em;
}
.horn-left-top {
margin-top: 20%;
}
.horn-left-middle {
transform: rotate(-60deg);
margin-top: 250%;
margin-left: -110%;
}
.horn-right {
margin-left: 75%;
transform: rotate(21deg);
}
.horn-right-bottom,
.horn-right-top {
background: #8B4513;
transform: rotate(-60deg);
margin-left: -110%;
border-radius: 2em 0.5em 0.5em 2em;
}
.horn-right-top {
margin-top: 20%;
}
.horn-right-middle {
margin-top: 250%;
}
.box {
-webkit-animation: mymove 5s;
/* Safari 4.0 - 8.0 */
animation: mymove 5s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
50% {
top: 50px;
}
75% {
top: 150px
}
100% {
top: 0px;
}
}
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<h1 class="neon">Welcome to TLW Christmas Countdown</h1>
<h2 class="neon">You Will be taken to your deal shortly!</h2>
</div>
<div class="row">
<div class="col-md-4 blue">
<!--Reindeer-->
<div class="box">
<!--Head -->
<div class="face">
<div class="face-copy"></div>
<div class="ear-left">
<div class="ear-inner"></div>
</div>
<div class="ear-right">
<div class="ear-inner"></div>
</div>
<div class="eye-left">
<div class="eye-left-inner">
<div class="pupil"></div>
</div>
</div>
<div class="eye-right">
<div class="eye-right-inner">
<div class="pupil"></div>
</div>
</div>
<div class="nose">
<div class="inner-nose"></div>
</div>
<div class="horn-left">
<div class="horn-left-bottom"></div>
<div class="horn-left-middle"></div>
<div class="horn-left-top"></div>
</div>
<div class="horn-right">
<div class="horn-right-bottom"></div>
<div class="horn-right-middle"></div>
<div class="horn-right-top"></div>
</div>
<!-- Closing Face -->
</div>
<!-- Closing Box -->
</div>
</div>
<div class="col-md-4 yellow">
<!--Youtube-->
<div class="video" ;>
<iframe width="540" height="285" src="https://www.youtube.com/embed/iDNWwxJonII" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

How center my spinner when it rotate - CSS Animation

I created a spinner in css and I put it in center without animation it works but when I start animation my spinner move away. Specifically When I use "#keyframes spinner" rule.
How I can keep it in center position?
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>

I modified the animation and added a transform-origin to the spinner :D
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform-origin: top left;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: rotate(0deg) translate(-50%,-50%);
}
100% {
transform: rotate(360deg) translate(-50%,-50%);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>

Put the span in another container and apply position: absolute to this container
.spinner-animation {
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.holder {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.holder .spinner {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation>.content {
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="spinner-animation">
<div class="holder">
<span class="spinner"></span>
</div>
<div class="content">Loading...</div>
</div>

The transform in your animation is overwriting the translate() positioning, you need to add translate() to your animation transform property.
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>

Flex-box solution: Display the parent element as a flex element, and align (vertically) and justify (horizontally) its absolutely positioned children to the center.
.spinner-animation{
width: 500px;
height: 500px;
background: gray;
display: flex;
align-items: center;
justify-content: center;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>

Spinner with transparent background?

I have a spinner with a white background which is animated through a keyframe. So, having this code pen, how could I remove this color to "smt-spinner-inner-circle" class without affecting the original desing? If the background is removed, the portion is visible. I have tried to apply a clip but the result is not the expected.
http://codepen.io/anon/pen/WpagJN
Html:
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
<div class="smt-spinner-inner-circle"></div>
</div>
To sum up, I need the background of the spinner transparent, not red, since the website will be different backgrounds depending on the page you are (grey, white, etc)...

Why not do like this, which will be transparent on top of any backgrounds, images included
.test {
display: inline-block;
padding: 20px;
}
.test.red{
background: red;
}
.test.green{
background: green;
}
.test.image{
background: url(http://lorempixel.com/500/200/nature/1/);
}
.smt-spinner-circle {
width: 50px;
height: 50px;
position: relative;
margin: 20px;
border-radius: 50%;
}
.smt-spinner {
height: 100%;
width: 100%;
border-radius: 50%;
border-right: 2px solid rgba(255,255,255,0.6);
border-top: 2px solid blue;
border-left: 2px solid blue;
border-bottom: 2px solid blue;
animation: rotate--spinner 1.6s infinite;
}
#keyframes rotate--spinner {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="test red">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>
<div class="test green">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>
<div class="test image">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>

Your background-color hides triangle that rotates, so simply change background: white to match your background color.
body{
background: red;
}
.smt-spinner-circle {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: blue;
border-radius: 50%;
}
.smt-spinner-inner-circle {
width: 92%;
height: 92%;
background: red;
border-radius: 50%;
margin: auto;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.smt-spinner {
height: 0;
width: 0;
border-radius: 50%;
border-right: 25px solid rgba(255,255,255,0.6);
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-bottom: 25px solid transparent;
animation: rotate--spinner 1.6s infinite;
}
#keyframes rotate--spinner {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
<div class="smt-spinner-inner-circle"></div>
</div>

You could create a simple spinner with only one element and different border styles.
.loader{
border: 2px solid #CECECE;
border-top-color: #14B48C;
width: 40px;
height: 40px;
border-radius: 50%;
animation: spin 1s infinite;
}
#keyframes spin{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}

CSS Code
#keyframes ldio-rpinwye8j0b {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.ldio-rpinwye8j0b div {
position: absolute;
animation: ldio-rpinwye8j0b 1s linear infinite;
width: 160px;
height: 160px;
top: 20px;
left: 20px;
border-radius: 50%;
box-shadow: 0 4px 0 0 #e15b64;
transform-origin: 80px 82px;
}
.loadingio-eclipse {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
}
.ldio-rpinwye8j0b {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-rpinwye8j0b div { box-sizing: content-box; }
<div
class="loadingio-eclipse">
<div class="ldio-rpinwye8j0b">
<div>
</div>
</div>
</div>