So I was trying to create a shining effect using CSS on a text but I am failing to do so.
Can anyone help me overcome this problem pls? Help would be highly appreciated.
https://codepen.io/TiagoLopes/pen/vZBMWB
I was trying to mimic this effect but on a text rather than an image...
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(31, 30, 30, 0.616);
width: 100px;
height: 20px;
overflow: hidden;
}
.block h3 {
overflow: hidden;
width: 100px;
margin: 10px auto;
margin-top: 10px;
height: 28px;
object-fit: cover;
box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
display: block;
transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-top: -10px;
}
.block:hover h3 {
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}
.block .glow-wrap {
overflow: hidden;
position: absolute;
width: 85%;
height: 180%;
top: 4px;
margin-top: -15px;
}
.block .glow {
display: block;
position: absolute;
width: 19%;
height: 477%;
background: rgb(255, 255, 255);
top: -9px;
overflow: hidden;
filter: blur(5px);
transform: rotate(45deg) translate(-450%, 0);
transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.block:hover .glow {
transform: rotate(45deg) translate(450%, 0);
transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.block:hover .glow-wrap {
margin-top: 5px;
}
<body>
<div class="block">
<h3 id="author">ZETHYST</h3>
<div class="glow-wrap">
<i class="glow"></i>
</div>
</div>
</body>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
I am aware that the initial question is answered several times. Usually I know how to do it, so its more a bug fixing question instead of a general question. The code shows a cross which behaves as a toggle. If clicked another 3 elements appear, where the one on the middle gives me headache. I used a fontAwesome icon and can´t figure out why it will not center in this div element.
I am summon a CSS master which could solve my bug. ;)
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<style>
html {
margin: auto;
width: 50%;
}
.modal-setting-toggle {
position: relative;
margin-top: 10px;
width:40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.modal-setting-toggle::before, .modal-setting-toggle::after {
content: "";
background: #c3c2c7;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.modal-setting-toggle::before {
transform: rotate(0deg);
}
.modal-setting-toggle::after {
transform: rotate(-90deg);
}
.modal-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.modal-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.modal-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.modal-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.modal-setting-toggle.open .modal-setting-button {
opacity: 1;
pointer-events: auto;
}
.modal-setting-toggle.open .modal-setting-button:first-of-type {
bottom: -50px;
background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}
.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
bottom: -100px;
background: #ecf0f3;
justify-content: center;
align-items: center;
text-align: center;
transition-delay: 0.05s;
}
.modal-setting-toggle.open .modal-setting-button:last-of-type {
bottom: -150px;
background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
transition-delay: 0.1s;
}
.modal-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.modal-setting-button:hover {
transform: scale(1.1);
}
</style>
<section id="modal-setting" class="modal box-shadow">
<div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
<div class="modal-setting-button"></div>
<div class="modal-setting-button"><i class="fas fa-link"></i></div>
<div class="modal-setting-button"></div>
</div>
</section>
Add display: flex to .modal-setting-toggle.open .modal-setting-button:nth-of-type(2) to make use of the align-items: center property.
html {
margin: auto;
width: 50%;
}
.modal-setting-toggle {
position: relative;
margin-top: 10px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.modal-setting-toggle::before,
.modal-setting-toggle::after {
content: "";
background: #c3c2c7;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.modal-setting-toggle::before {
transform: rotate(0deg);
}
.modal-setting-toggle::after {
transform: rotate(-90deg);
}
.modal-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.modal-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.modal-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.modal-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.modal-setting-toggle.open .modal-setting-button {
opacity: 1;
pointer-events: auto;
}
.modal-setting-toggle.open .modal-setting-button:first-of-type {
bottom: -50px;
background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}
.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
bottom: -100px;
background: #ecf0f3;
justify-content: center;
align-items: center;
text-align: center;
transition-delay: 0.05s;
display: flex; /* ADD THIS */
}
.modal-setting-toggle.open .modal-setting-button:last-of-type {
bottom: -150px;
background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
transition-delay: 0.1s;
}
.modal-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.modal-setting-button:hover {
transform: scale(1.1);
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<section id="modal-setting" class="modal box-shadow">
<div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
<div class="modal-setting-button"></div>
<div class="modal-setting-button"><i class="fas fa-link"></i></div>
<div class="modal-setting-button"></div>
</div>
</section>
https://codepen.io/DubCoder/pen/poEQJap I really like this hover effect on desktop, but when I show my friends my site on mobile, they touch the image, and it enlarges/colorizes, but then it stays in that state, even after they touch it again. It only goes back to it's original black and white state after they scroll away from it.
I would like the photo to toggle between the two states each time you touch it on mobile. I'm not sure how to go about this. I'm sure there's a way to use media queries or JS to recognise when the user is on a mobile, and add/remove the colored state on click.
I think the fact there's pseudo-classes involved may make it trickier.
body {
background-color: beige
}
.item {
width: 50%;
position: relative;
left: 5rem;
top: 2rem;
filter: grayscale(100%);
transform: scale(0.8, 0.8) rotate(3deg);
transition: all 0.35s;
}
.polaroid {
background: #fff;
padding: 1rem;
box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}
.polaroid>img {
max-width: 100%;
height: auto;
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.35s;
}
.item .polaroid:before {
height: 20%;
width: 47%;
bottom: 0px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}
.item:hover {
filter: none;
transform: scale(1, 1) rotate(0deg) !important;
transition: all 0.35s;
}
.item:hover .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 90%;
width: 75%;
bottom: 0%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
transition: all 0.35s;
}
<div class="item">
<div class="polaroid">
<img src="https://i.imgur.com/5YVg9Ru.jpg" />
</div>
</div>
Consider making it focusable. It won't be a toggle by pressing just it, but it will still act natural as to what the user would expect and will be much easier to add.
You can do it by adding tabindex="0" to .item in the HTML markup. Then replace the two lines:
.item:hover {
.item:hover .polaroid:before {
with
.item:hover, .item:focus {
.item:hover .polaroid:before, .item:focus .polaroid:before {
This will apply the effect when it's focused too. You might want to add
outline: none
Inside the .item:hover, .item:focus class to remove the black outline on focus.
Your final results might be:
body {
background-color: beige
}
.item {
width: 50%;
position: relative;
left: 5rem;
top: 2rem;
filter: grayscale(100%);
transform: scale(0.8, 0.8) rotate(3deg);
transition: all 0.35s;
}
.polaroid {
background: #fff;
padding: 1rem;
box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}
.polaroid>img {
max-width: 100%;
height: auto;
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.35s;
}
.item .polaroid:before {
height: 20%;
width: 47%;
bottom: 0px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}
.item:hover, .item:focus {
outline: none;
filter: none;
transform: scale(1, 1) rotate(0deg) !important;
transition: all 0.35s;
}
.item:hover .polaroid:before, .item:focus .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 90%;
width: 75%;
bottom: 0%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
transition: all 0.35s;
}
<div class="item" tabindex="0">
<div class="polaroid">
<img src="https://i.imgur.com/5YVg9Ru.jpg" />
</div>
</div>
If you want a toggle, you'll need to use JS. I'm simply adding and removing a active class from the element on click and then using it in place of an event.
I removed the hover effect so you can see it better on PC.
function toggleClass(ele, className) {
if (ele.classList.contains(className)) {
ele.classList.remove(className);
} else {
ele.classList.add(className);
}
}
body {
background-color: beige
}
.item {
width: 50%;
position: relative;
left: 5rem;
top: 2rem;
filter: grayscale(100%);
transform: scale(0.8, 0.8) rotate(3deg);
transition: all 0.35s;
}
.polaroid {
background: #fff;
padding: 1rem;
box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}
.polaroid>img {
max-width: 100%;
height: auto;
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.35s;
}
.item .polaroid:before {
height: 20%;
width: 47%;
bottom: 0px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}
.item.active {
outline: none;
filter: none;
transform: scale(1, 1) rotate(0deg) !important;
transition: all 0.35s;
}
.item.active .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 90%;
width: 75%;
bottom: 0%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
transition: all 0.35s;
}
<div class="item" onclick="toggleClass(this, 'active')">
<div class="polaroid">
<img src="https://i.imgur.com/5YVg9Ru.jpg" />
</div>
</div>
In a 1920*1080 screen, the play button and the waves outside are exactly inside the laptop image screen and everything is fine.
But when I resize the screen width the play button moves independently to the laptop screen and gets out of the screen of the laptop image. it also doesn't change its size so it gets ugly!
How can I make this responsive to the size of the laptop image screen and fix the play button to stay inside the laptop screen?
I tried flexbox but it seems that I need a hand...Please help...
Any Suggestions Would Be Greatly Appreciated...
.videoContainer {
padding-top: 14rem;
}
.video-play-button {
position: relative;
z-index: 10;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
/* background: #fa183d; */
border-radius: 50%;
padding: 18px 20px 18px 28px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}
.video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #ba1f24;
border-radius: 50%;
}
.video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #fa183d;
border-radius: 50%;
transition: all 200ms;
}
.video-play-button:hover:after {
background-color: darken(#fa183d, 10%);
}
.video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-play-button span {
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 32px solid #fff;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
}
.video-box-computer {
position: relative;
display: flex;
justify-content: center;
top: 180px
}
.videoImage {
width: 45%;
}
.waves-block {
position: absolute;
float: center;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.waves-block .waves {
position: absolute;
width: 24rem;
height: 24rem;
background: rgb(178, 163, 214, 0.2);
opacity: 0;
border-radius: 320px;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
}
.waves-block .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.waves-block .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waves-block .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
<section class="videoContainer">
<div class="video-box-computer">
<img class="videoImage" src="http://demo.graygrids.com/themes/beam/imgs/macbook.png">
</div>
<a id="play-videoA" class="video-play-button" href="#">
<span></span>
<div class="waves-block">
<div class="waves wave-1"></div>
<div class="waves wave-2"></div>
<div class="waves wave-3"></div>
</div>
</a>
</section>
I have two different containers one contains a play button with animation effects and the other is just a wave animation.
I can't find a solution to make them one by putting the play button over the wave animation so that we have a play button with a wave effect outside.
/*Video Player*/
.videoContainer {
padding-top: 10rem;
}
.video-play-button {
position: relative;
z-index: 10;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
/* background: #fa183d; */
border-radius: 50%;
padding: 18px 20px 18px 28px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}
.video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #ba1f24;
border-radius: 50%;
}
.video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #fa183d;
border-radius: 50%;
transition: all 200ms;
}
.video-play-button:hover:after {
background-color: darken(#fa183d, 10%);
}
.video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-play-button span {
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 32px solid #fff;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
}
.video-overlay {
position: fixed;
width: 100%;
height: auto;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 10px;
background: rgba(0,0,0,0.80);
opacity: 0;
transition: all ease 500ms;
}
.video-overlay.open {
position: fixed;
top: 0;
left: 0;
z-index: 999;
opacity: 1;
}
.video-overlay-close {
position: relative;
z-index: 1000;
top:75px;
right: 75px;
font-size: 40px;
line-height: 1;
font-weight: 400;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 200ms;
}
.video-overlay-close:hover {
color: #fa183d;
}
.video-overlay iframe {
position: absolute;
top: 54%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
}
/*=======================================================
VIDEO POP UP:
========================================================*/
.waves-block {
position: relative;
margin-top: 260px;
margin-bottom: 100px;
float: center;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.waves-block .waves {
position: absolute;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
background: rgb(178, 163, 214, 0.2);
opacity: 0;
border-radius: 320px;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
}
.waves-block .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.waves-block .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waves-block .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
<section class="videoContainer">
<a id="play-video" class="video-play-button" href="#">
<span></span>
</a>
<div id="video-overlay" class="video-overlay">
<a class="video-overlay-close">×</a>
</div>
</section>
<div class="waves-block">
<div class="waves wave-1"></div>
<div class="waves wave-2"></div>
<div class="waves wave-3"></div>
</div>
I have tried to change the positions but because of the margins, it was a failure.
Any suggestions would be greatly appreciated.
add the wave to the play-video element
remove the margins from wave element
set wave element to position:absolute; instead of relative
/*Video Player*/
.videoContainer {
padding-top: 10rem;
}
.video-play-button {
position: relative;
z-index: 10;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
/* background: #fa183d; */
border-radius: 50%;
padding: 18px 20px 18px 28px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}
.video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #ba1f24;
border-radius: 50%;
}
.video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #fa183d;
border-radius: 50%;
transition: all 200ms;
}
.video-play-button:hover:after {
background-color: darken(#fa183d, 10%);
}
.video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-play-button span {
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 32px solid #fff;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
}
.video-overlay {
position: fixed;
width: 100%;
height: auto;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 10px;
background: rgba(0,0,0,0.80);
opacity: 0;
transition: all ease 500ms;
}
.video-overlay.open {
position: fixed;
top: 0;
left: 0;
z-index: 999;
opacity: 1;
}
.video-overlay-close {
position: relative;
z-index: 1000;
top:75px;
right: 75px;
font-size: 40px;
line-height: 1;
font-weight: 400;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 200ms;
}
.video-overlay-close:hover {
color: #fa183d;
}
.video-overlay iframe {
position: absolute;
top: 54%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
}
/*=======================================================
VIDEO POP UP:
========================================================*/
.waves-block {
position: absolute;
float: center;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.waves-block .waves {
position: absolute;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
background: rgb(178, 163, 214, 0.2);
opacity: 0;
border-radius: 320px;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
}
.waves-block .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.waves-block .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waves-block .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
<section class="videoContainer">
<a id="play-video" class="video-play-button" href="#">
<span></span>
<div class="waves-block">
<div class="waves wave-1"></div>
<div class="waves wave-2"></div>
<div class="waves wave-3"></div>
</div>
</a>
<div id="video-overlay" class="video-overlay">
<a class="video-overlay-close">×</a>
</div>
</section>
I just want to make a preloader that's positioned in the middle of the page.
Requirements:
position: fixed;
centered on the X-axis
It's just a div with class 'preloader' in body. Body is this div's direct parent, no other wrapper in between.
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 45%;
left: 50%;
width: 60px;
height: 60px;
-ms-transform: translateX(100px); /*100px just to test if it moved at all, initially had -50%, see list below*/
-webkit-transform: translateX(100px);
transform: translateX(100px);
//=====rest is just animation and aesthetics======
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
I've done:
display: block;
display: inline-block;
translateX(-50%);
translateX(30px);
translate(-50%, 0);
translate(30px, 0);
translate(-50%, -50%);
rearranging the transforms.. lol
took off -o & -mos
margin: 0 auto (worked with position: relative when I didn't need it to be fixed)
https://jsfiddle.net/goa3v2ke/#
You need to do like this, where you set top/left to 50% and then move them back with translate using the same value, int this case -50%.
Sample 1 now center it both horizontal and vertical, and by change the top/left values, you can move it in the direction you want, sample 2 has 33% as top value.
Update based on question edit
The small X/Y-axis offset is caused by the rotate being executed before the translate, so change your #keyframes rule to this, showed in sample 3 and an update of your fiddle
#keyframes rotatePreloader {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
Sample 1
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%,-50%);
/*=====rest is just animation and aesthetics======*/
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
<div class="preloader"></div>
Sample 2
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 33%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%,-50%);
/*=====rest is just animation and aesthetics======*/
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
<div class="preloader"></div>
Sample 3
.leftPreloaderBG {
position: fixed;
background-color: black;
width: 50%;
height: 100%;
z-index: 98;
top: 0px;
left: 0px;
transition: width 1s;
}
.leftPreloaderBG.loaded {
width: 0;
}
.rightPreloaderBG {
position: fixed;
background-color: black;
width: 50%;
height: 100%;
z-index: 98;
top: 0px;
right: 0px;
transition: width 1s;
}
.rightPreloaderBG.loaded {
width: 0;
}
#keyframes rotatePreloader {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 33%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%, -50%);
/*=====rest is just animation and aesthetics======*/
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
.preloader.loaded {
opacity: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: white;
font-size: 1em;
background-color: gray;
background-position: center;
background-repeat: repeat;
}
<body>
<div class="preloader"></div>
<div class="leftPreloaderBG"></div>
<div class="rightPreloaderBG"></div>
</body>
It is because you override the transform translate value in the keyframe animation. Try it like this:
.leftPreloaderBG {
position: fixed;
background-color: black;
width: 50%;
height: 100%;
z-index: 98;
top: 0px;
left: 0px;
transition: width 1s;
}
.leftPreloaderBG.loaded {
width: 0;
}
.rightPreloaderBG {
position: fixed;
background-color: black;
width: 50%;
height: 100%;
z-index: 98;
top: 0px;
right: 0px;
transition: width 1s;
}
.rightPreloaderBG.loaded {
width: 0;
}
#keyframes rotatePreloader {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 33%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%, -50%);
/*=====rest is just animation and aesthetics======*/
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
.preloader.loaded {
opacity: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: white;
font-size: 1em;
background-color: gray;
background-position: center;
background-repeat: repeat;
}
<body>
<div class="preloader"></div>
<div class="leftPreloaderBG"></div>
<div class="rightPreloaderBG"></div>
</body>