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;
}
Related
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!
I've got text that 'appears' slowly thanks to a ::before element and a transition. The box created by the ::before code covers the text and the transition makes the box than move horizontally, creating the illusion that the text behind it is appearing in real time. Here's the code:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
p {
font-size: 90px;
}
.test {
position: relative;
}
.test2::before {
content: '';
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
animation: test;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
transform-origin: right;
}
#keyframes test {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
<p class="test test2">
TEST
</p>
Code works perfect, but here's the problem. The background has to be the same colour of the box that moved horizontally. I want to have a picture in the background, but now the box that moves horizontally (and it white) is visible. If I make the box opacity 0 or have no background, then it doesn't cover the text anymore. Any way around this?
I am aware that !important is not recommended, and the few known use cases where it is appropriate includes when working with third party libraries such as Bootstrap. However, i would like to ask if this use case is appropriate too. Suppose i have a <div/> which i would want to animate from background-color transparent to a certain color. However, i would like to have a color change on hover too after the animation happens, but i can't seem to find a way to do it without using the !important rule. Thanks in advance!
div{
position: absolute;
width: 100px;
height: 100px;
animation: animate 4s forwards;
}
div:hover{
background-color: blue !important;
}
#keyframes animate{
from {
background-color: transparent;
}
to {
background-color: maroon;
}
}
Not judging if it would be an appropriate use of !important here or not, one way around in your case would be to split your animation and transition on two different elements. Note that it's quite common to do so when you want to animate and transition the same properties.
background-color even has the advantage that you can use pseudo-elements instead of a plain one.
Less talk, more code:
div{
position: absolute;
width: 100px;
height: 100px;
animation: animate 4s forwards;
}
div::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: background-color 2s;
}
div:hover::after{
background-color: blue;
}
#keyframes animate{
from {
background-color: transparent;
}
to {
background-color: maroon;
}
}
<div></div>
What I prefer to do is unsetting the property beforehand I want to customise with the bootstrap, say I want to change button's default blue colour to red, I do it using,
background-color: unset;
background-color: #ff000;
Keep in mind, the order of code matters here by a lot
Do the animation differently and don't rely on forwards
div {
position: absolute;
width: 100px;
height: 100px;
animation: animate 4s;
background-color: maroon;
transition: background-color 2s;
}
div:hover {
background-color: blue;
}
#keyframes animate {
from {
background-color: transparent;
}
}
<div></div>
<div class="wrapper">
<div class="avatar"></div>
<div class="desc an-all"></div>
</div>
<div class="wrapper">
<div class="avatar"></div>
<div class="desc an-all"></div>
</div>
.wrapper{
position: relative;
width: 250px;
height: 150px;
cursor: pointer;
}
.wrapper:hover .desc{
opacity: 1;
}
.avatar{
width: 70px;
height: 70px;
background: green;
position: relative;
z-index: 30;
}
.desc{
position: absolute;
top: 50px;
left: 0;
height: 250px;
width: 100%;
background: red;
opacity: 0;
z-index: 20;
}
.an-all{
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
I can't figure out why is this happening. I thought that a position element inside a parent with position relative only apply inside parent and outside is a different world.
Why when I hover the green box of the first wrapper div the red one don't overlay the second's wrapper div green box ? I want the red box to be under the green one when I hover
http://codepen.io/laxmana/pen/txKbF
See if you like this example:JSFiddle
It uses your same working code, but the wrapper divs are placed within a relative parent, and each are given their own z-index. This is how you can layer one on top of another. In a real world example, the divs may not be together (like a tooltip), and then you wouldn't need the additional parent. The parent is useful when the divs are together, and on the same level. Play around with the JSFiddle, and try different options with content.
In the original example, the reason the green divs were always on top, regardless of their html order, is because the red divs are absolutely positioned, and the 2 wrapper elements are on the same level within the parent.
.wrapper {
position: relative;
width: 250px;
height: 150px;
cursor: pointer;
}
.wrapper:hover .desc {
opacity: 1;
}
.relative-container {
position:relative;
}
.top {
z-index:10;
}
.bottom {
z-index:9;
}
.avatar {
width: 70px;
height: 70px;
background: green;
position: relative;
z-index: 30;
}
.desc {
position: absolute;
top: 50px;
left: 0;
height: 250px;
width: 100%;
background: red;
opacity: 0;
z-index: 20;
}
.an-all {
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
Update
Here is an example with multiple display:inline-block divs. The trick is for the z-index to work, the divs need to be siblings/on the same level as each other (this works for other elements too). The first div in the row that needs to go on top gets the highest z-index, while the last div gets the lowest z-index.
JSFiddle Example
Here is a great resource explaining the details on the z-index https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Note: In the second JSFiddle I used display:none on the red ".desc" dropdowns, and made them visible only when moused over by adding display:block; to ".wrapper:hover .desc". In your original code even though you don't see the red divs, when you hover over their invisible area it triggers them to show. By using display:none, they are truly not displayed in the page and therefore can't trigger the hover state. The trick is that display:block overwrites the display:none in the hover class, so they will show when the green buttons are hovered over.
This hides the red divs:
.desc {
display:none;
This shows the red divs only when the green divs are hovered over:
.wrapper:hover .desc {
display:block;
Your z-index needs to change. Right now, both red boxes have an index lower than the green, which is why it appears beneath the second green box.
Update
Based on your comment, you want to have the green box both underlay the avatar class and overlay the same class below the wrapper. Because you're using classes alone, you can't have both actions. You could space the wrappers differently so you have the description still underlay the avatar and not overlap lower elements.
CSS
.wrapper{
position: relative;
width: 250px;
height: auto; /* Set this to auto to keep elements separate from one another */
cursor: pointer;
}
.wrapper:hover .desc {
opacity: 1;
}
.avatar{
width: 70px;
height: 70px;
background: green;
position: relative;
z-index: 30;
}
.desc{
position: relative; /* Keep it inside the document flow */
top:-20px; /* sets the overlap from the avatar class */
left: 0;
height: 250px;
width: 100%;
background: red;
opacity: 0;
z-index: 20; /* Displays below the avatar */
}
.an-all{
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
Working pen
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;
}