I have a div that has a css animation transition for it's height when you hover over it. When you also hover over it, the background color change from pink to orange. However, I don't want this background color to change until after my height is done transitioning. Is there a way I can do this? I looked into using transition-delay but it seems that it can only be applied to one transition property? Thanks!
div {
margin: 3rem;
height: 10rem;
width: 10rem;
background: pink;
transition: height 0.3s ease;
}
div:hover {
height: 20rem;
background: orange;
}
<div />
You can specify delays for any property you like:
div {
transition: height 0.3s ease, background 0.3s ease 0.3s;
}
(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)
Related
In this project, there's an image that needs to scale with a transition when hovered over, but it also is translated first. The only problem is, the transition is applied to both transformations.
The properties for the image are:
.gal_img{
width: 60%;
border: 5px solid black;
transform: translate(30%);
transition: all 0.1s, border 0s, width 0s;
}
The properties for the image on hover are:
.gal_img:hover{
transform: scale(1.1);
}
On most browser-os-constillations the standard background of the site is white, so if I create a website I at first set the background-color to something dark. But if I try and set the transition property on "*", the background also fades in, which, in my opinion, looks bad. How can I remove that?
*{
transition: 2s;
}
body{
background-color: #000
}
<html>
<body>
<p>Hi!</p>
</body>
</html>
if your point is to select all and avoid the body from transition
you can use :not(body) :
:not(body){
transition: 2s;
}
body{
background-color: #000
}
I can't seem to be able to replicate the fade transition of the background you're describing.
However, if you need to exclude a specific element and/or property from animating, you can do it like this:
To exclude an element:
*:not(body) {
transition: all 2s;
}
To exclude a property:
* {
transition: all 2s, background-color 0;
}
Or to prevent the transitioning of background-color on the body:
* {
transition: all 2s;
}
body {
transition: all 2s, background-color 0;
}
This is an image depicting my problem
The grey overlay is on top of the body tree and has the following css:
overlay{
z-index: 500;
background: black;
width: 100%;
height: 100%;
opacity: 0.7;
position: absolute;
display: none;
}
The div beneath the overlay (with the top border) has the following css
inside_div{
height: 575px;
width: 50%;
float: left;
border: 2px solid green;
padding:20px;
overflow-y:scroll;
}
This class is added to .inside_div dinamically:
.inside_div(another_class_added_dinamically){
outline: none;
border-color: green;
box-shadow: 0 0 10px green;
opacity: 1;
-webkit-animation: glow 0.7s infinite alternate;
-webkit-transition: border 0.7s linear, box-shadow 0.7s linear;
-moz-transition: border 0.7s linear, box-shadow 0.7s linear;
transition: border 0.7s linear, box-shadow 0.7s linear;
}
And all elements inside the "inside_div" are added the following class dinamically: (notice the following one affects all children too with the '*')
.inside_div(another_class_added_dinamically), .inside_div(another_class_added_dinamically) *{
z-index: 1000 !important;
}
However, as seen in the image, not all elements stand out (the background inside the div remains grey). I would need to know a way of toggling the two previous classes dinamically to highlight the elements as described. What exactly is wrong here? Thank you very much for your help
From W3 Schools:
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Very likely the elements you are giving the z-index do not have position on one of those three.
Hope that helps
You don't seem to set the position property on your inside_div element. You should post a fiddle with your code.
A bit late with this answer, but your problem could be caused by the fact that your overlay div has an opacity < 1. As a result, a new stacking context is being created, which might explain the behavior you see. It's hard to tell without seeing all of your code. Here is an excellent article explaining stacking context in more detail:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Using CSS transitions on most properties runs as expected, except this issue I am having with colours.
I have set up a demonstration pen here.
When transitions are instructed to change the color property, they all queue after each other instead of happening all at once.
This seems limited to webkit as IE and Firefox work as expected.
#change {
color: green;
transition: color 200ms linear;
}
.changed {
color: red;
}
I think it's because color is inherited property, and you use * selector for transition. You should set transition: color only to element you change color, for example (http://codepen.io/sergdenisov/pen/QbjjjP):
#container {
padding: 0;
transition: color 500ms;
}
#container * {
transition: margin 500ms;
}
I would like to know how do you create the "delay" in Responsive design?
What I mean is, take the site awwwards.com as an example. When you reduce the width of the browser there is a bit of a delay for the site to respond.
I would of imagined the code being this:
html, body {transition: all 0.2s ease-in-out;}
but clearly it isnt (...or is it?!)
Just want to apply this effect on my own site which is Blue Harlequin
Add -webkit-transition: width 0.3s linear; to your .w css class like this
CSS:
.w {
width: 960px;
margin: 0 auto;
-webkit-transition: width 0.3s linear;
}
Because the .w is the container for all your elements so add the the transition to that class will make the layout as how you expect.
It does have transition: width 0.3s linear 0s; but it on the wrapper div.