so I am trying to add a loader to a webpage and it wont hide the all elements, although on a page it does at another html it doesnt , it's about a logo which z-index is set to 1 but the loader its set to 99999, I've tried to change the z-index of the logo to 0 but it still shows up, SO studying more the only difference is that on a page the logo is anchor and on another its not , and where its declared as anchor it wont hide on loading animation.
<div class="white-logo"><img src="img/logo_black.png" alt="logo_white"></div>
.loader_bg{
position: fixed;
z-index: 999999;
background: #fff;
width: 100%;
height: 100%;
}
.loader{
border: 0 soild transparent;
border-radius: 50%;
width: 150px;
height: 150px;
position: absolute;
top: calc(50vh - 200px);
left: calc(50vw - 75px);
text-align: center;
}
.loader:before, .loader:after{
content: '';
border: 1em solid #BDBDBD;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s linear infinite;
opacity: 0;
}
.loader:before{
animation-delay: .5s;
}
#keyframes loader{
0%{
transform: scale(0);
opacity: 0;
}
50%{
opacity: 1;
}
100%{
transform: scale(1);
opacity: 0;
}
}
.white-logo > a > img {
display: run-in;
width: 5%;
margin-left: 10%;
margin-top: -8.5%;
position: absolute;
z-index: 1;
}
I added some screenshots to understand the problem with the difference , I think is from anchor but I dont know what to do
Here are the photos and the difference
I am not certain if this is what you want (I assume the animation should display over the .loader_bg) so I just set the .loader_bg to have a negative z-index.
.loader_bg {
z-index: -1;
}
I have taken the liberty of making a jsfiddle with the relevant code in, but you will need to update if this is not the desired effect, adding an example would help, but you can also edit the fiddle and iterate over it.
EDIT
Sorry I see the issue now, I added some text to the anchor.
Change your .loader_bg with these properties:
.loader_bg {
z-index:0;
top: 0;
}
Solved, seemed I had two files with the css animation, one for the text and one for the circles, I put all of them in one file and it worked, thank you!
Related
I work with search bar, and i want to make it nice, but for some reason transition animation is not working for me, i try to use few methods but only animation css is help example:
.active {
width: 100%;
outline: none !important;
z-index: 901;
border: 1px solid #30a161 !important;
animation: animateRight .6s ease-in-out;
}
#-webkit-keyframes animateRight {
0% {
width: 100px;
}
100% {
width: 100%;
}
}
But transition method for me it's better, so what i want, i have animation hiding body, animation of closing input for search (opening animation i have) maybe better solution to move to transition.
.search_modal {
position: absolute;
top: -50px;
left: 0;
transition: top 1s ease; // here should be animation
}
JsFiddle
So i want 2 animation, first when added class .search_modal it;s moving to -50 on top and when closing again need animation, and input opening and closing.
You need to put the transition property on the element before you transition and make your transition class more specific. The following snippert should do the trick
header .search_container {
position: relative;
display: flex;
flex: 1;
align-items: center;
margin-right: 1rem;
z-index: 1024;
top: 0;
transition: top 1s ease; //Add it here
}
header .search_container.search_modal {
top: -50px;
left: 0;
}
I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples, and translate being based on percentage/pixels etc...
The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the margin value.
Can anybody think of a way in which I can use scale, and also maintain the alignment?
Update
I want to avoid inverse/reverse scaling at all costs as it renders badly in the browser in most cases. With that in mind, I don't think this is actually possible but will leave the question open in case anyone is aware of some CSS magic.
See the following snippet as an example:
.tile {
position: relative;
width: 500px;
height: 100px;
padding: 40px;
}
.tile:hover:before {
transform: scale(.9);
}
.tile:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: -1;
transition: transform .3s ease-out;
}
h1 {
text-align: center;
color: white;
}
.tile > .button {
position: absolute;
right: 0;
top: 0;
display: inline-block;
background: red;
padding: 10px 15px;
color: white;
}
<div class="tile">
<h1>Hello World</h1>
<div class="button">Align Me</div>
</div>
Try scaling .tile itself and reverse-scaling its children:
.tile {
position: relative;
width: 500px;
padding: 40px;
background: #000;
transition: transform .3s ease-out;
}
h1 {
text-align: center;
}
.tile>* {
color: white;
transition: transform .3s ease-out;
}
.tile>.button {
position: absolute;
right: 0;
top: 0;
background: red;
padding: 10px 15px;
color: white;
transform-origin: 100% 0;
}
.tile:hover {
transform: scale(.9);
}
.tile:hover>* {
transform: scale(1.1);
}
<div class="tile">
<section>
<h1>Hello World</h1>
<p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>
</section>
<div class="button">Align Me</div>
</div>
Another idea is animating top and right of .button:
html,
body {
width: 75%;
margin: 0;
padding: 0
}
* {
box-sizing: border-box
}
.tile {
position: relative;
width: 100%;
padding: 40px;
color: white;
}
.tile:hover:before {
transform: scale(.9);
}
.tile:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: -1;
transition: transform .3s ease-out;
}
h1 {
text-align: center;
}
.tile>.button {
position: absolute;
right: 0;
top: 0;
background: red;
padding: 10px 15px;
color: white;
transition: .3s ease-out;
}
.tile:hover>.button {
top: 5%;
right: 5%
}
<div class="tile">
<h1>Hello World</h1>
<p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>
<div class="button">Align Me</div>
</div>
The next idea is using a bit more complex code, but doing animation of transform property only:
html,
body {
width: 75%;
}
* {
box-sizing: border-box
}
.tile {
position: relative;
width: 100%;
padding: 40px;
color: white;
}
.tile:hover:before {
transform: scale(.9);
}
.tile:before,
.tile>.button {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width:100%; height:100%;
background: #000;
transition: transform .3s ease-out;
}
h1 {
text-align: center;
}
.tile>.button {
z-index: 1;
display: flex;
align-items: flex-start;
margin: 0 -100% -100% 0;
background: transparent;
transition: .3s ease-out;
pointer-events: none;
}
.tile>.button div {
padding: 10px 15px;
background: red;
cursor: pointer;
pointer-events: all;
}
.tile>.button:before {
content: '';
flex: 1 0;
}
.tile:hover>.button {
transform: translate3d(-5%, 5%, 0);
}
<div class="tile">
<h1>Hello World</h1>
<p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>
<div class="button">
<div>Align Me</div>
</div>
</div>
If you are scaling by p then you are reducing the size and the new width will become width*(1 - p). Same logic for the height. You can consider the use of calc() and easily define the translate using this formula.
We divide by 2 because we reduce from both side and we will translate from 1 side
.tile {
position: relative;
width: 540px;
height: 200px;
display:flex;
align-items:center;
justify-content:center;
}
.tile:hover:before {
transform: scale(0.9);
}
.tile:hover .button{
transform: translate(calc(-540px*0.1/2),calc(200px*0.1/2));
}
.tile:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: -1;
transition: transform .3s;
}
h1 {
text-align: center;
color: white;
margin:0;
}
.tile > .button {
position: absolute;
right: 0;
top: 0;
display: inline-block;
background: red;
padding: 10px 15px;
color: white;
transition: transform .3s ;
}
<div class="tile">
<h1>Hello World</h1>
<div class="button">Align Me</div>
</div>
You can consider CSS variables to easily change the scale value:
.tile {
position: relative;
width: 540px;
height: 200px;
display:flex;
align-items:center;
justify-content:center;
--s:0.9;
}
.tile:hover:before {
transform: scale(var(--s));
}
.tile:hover .button{
transform: translate(calc(-540px*(1 - var(--s))/2),calc(200px*(1 - var(--s))/2));
}
.tile:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: -1;
transition: transform .3s;
}
h1 {
text-align: center;
color: white;
margin:0;
}
.tile > .button {
position: absolute;
right: 0;
top: 0;
display: inline-block;
background: red;
padding: 10px 15px;
color: white;
transition: transform .3s ;
}
<div class="tile">
<h1>Hello World</h1>
<div class="button">Align Me</div>
</div>
<div class="tile" style="--s:0.5">
<h1>Hello World</h1>
<div class="button">Align Me</div>
</div>
I want to put a loading css right in the center of my screen and I want it to work mobile as well as in desktop. Currently, my CSS is this:
.spinner {
width: 100px;
height: 100px;
position:absolute;
top: 50%;
left: 50%;
margin: 100px auto;
z-index:99999;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
z-index:99999;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
z-index:99999;
}
This is what I currently have
You can see it is not entirely centered and I don't know how to achieve this. The spinner div is in my application.html.erb inside the body tag above the yield.
How can I center this at the exact center of the web page including the sidenav and navbar?
You can use the below CSS inside .spinner:
transform: translate(calc(-50%), calc(-50%));
position: fixed; /* if absolute doesn't work */
margin: 0; /* no need of margin */
So the fix was easy... I just added the code below to the .spinner class in the CSS.
transform: translate(calc(-50%), calc(-50%));
position: fixed;
The only thing I still have a problem with is that the spinner is too far down. I think changing top: 50% to top: 40% might do the trick.
I have two images inside a div. Same width/height and an effect on hover to display the secondary element. However, the secondary image is displaying before the first one, what is not the expected behavior.
The CSS:
.div-container {
position: relative;
}
.div-container img.primary {
position: relative;
}
.div-container img.secondary {
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out;
}
.div-container img.secondary:hover {
opacity: 0;
}
The HTML:
<div class="div-container">
<img class="primary">
<img class="secondary">
</div>
The question: I want to display the primary image first.
Example: http://jsfiddle.net/A6y7Y/
You can either use z-index and change the values on the :hover effect or just easily switch the images. But what you should be looking for here is putting them on a single file and controlling the position of the background image with CSS like a Sprite. Here is a good example
Swap the css style of the primary and secondary css style and add z-index to the primary as 1 should resolve the issue
HTML
`<div class="div-container">
<div class="primary">Layer1</div>
<div class="secondary">Layer2</div>
</div>`
CSS
`.div-container {
position: relative;
}
.div-container div{
width:100px;`enter code here`
height:100px;
border:1px solid red;
}
.div-container .secondary {
position: relative;
background-color: blue;
}
.div-container .primary {
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out;
background-color: #ccc;
z-index:1;
}
.div-container .primary:hover {
opacity: 0;
}`
I solved the problem.
For some reason, setting opacity: 0 to the hovered image, made it appear first.
All I did was set the secondary image to opacity: 0 and the container div on hover with opacity: 1 (instead of the hovered image). I also included a z-index to both images with the secondary image with a higher index. Below the code I'm using, hope it could help someone in the future.
.div-container {
position: relative;
}
.div-container img.primary {
position: relative;
z-index: 5;
}
.div-container img.secondary {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 6;
transition: opacity 1s ease-in-out;
}
.div-container:hover img.secondary {
opacity: 1;
}
Im trying to make a popup box that causes the surrounding area to get greyed out. My issue is that the opacity of the shadow div seems to overide that of the popup. I tried changing one from absolute to fixed position and increasing the z index of the popup but neither worked.
Here is a screensot of the problem.
And below is the relevent code (ask if you need to see more)
.textPopup
{
width: 1400px;
height: 600px;
background-color: White;
position: fixed;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 0.2;
}
#innerPopup
{
background-color: White;
width: 1350px;
height: 550px;
position: absolute;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 1;
}
... snip
<div id="popupShadow">
</div>
<div class="textPopup">
<div id="innerPopup">
</div>
</div>
</body>
</html>
The issue you have is that #innerPopup is inside #textPopup. The opacity is then inherited by the child and cannot be overridden with it's own property.
If it is not possible to separate them, then consider using an rgba value for the background as opposed to the opacity property:
#textPopup {
background-color: rgba(255,255,255,0.2);
}
You can see it working on jsfiddle.
You'll be able to make it work as expected by making the following changes in your CSS:
#innerPopup
{
position: relative; /* change this to relative - will allow you to override the parent specified opacity */
opacity: 1;
/* other properties */
}