.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 0.5s ease;
}
.box:hover + .circle {
opacity: 1;
}
<body>
<div class="box">
</div>
<div class="circle">
</div>
</body>
Here, when I hover over .box, .circle fades in in 0.5s.
Now when I move my cursor away from .box, I want .circle to fade out at a different speed (say, 1s). How to make it happen?
You need to set the off duration on the non-hover state, and the on duration on the hover.
That is because once you hover, the :hover properties take precedence (assuming your selectors are correctly specified), so the duration you have for hover will apply.
Once you hover off, the properties set on the normal element apply.
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 2s ease;
}
.box:hover + .circle {
opacity: 1;
transition-duration:0.5s
}
<div class="box"></div>
<div class="circle"></div>
Related
If you hover over the box in my example, then the color of the small box changes slowly from red to yellow. But if you stop hovering then it immediately jumps back to red.
.container { position: relative; background: black; width: 200px; height: 200px; }
.subcontainer { position: absolute; bottom: 10px; width: 100%; height: 20px; background: red; animation-duration: 2s; }
.container:hover .subcontainer { background: yellow; animation-duration: 2s; animation-name: example; }
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<div class="container">
<div class="subcontainer">
</div>
</div>
How can I prevent this instant color change? I tried to add animation-duration: 2s; to .subcontainer as well, but it does not work.
You need a transition defined in the .subcontainer instead of an animation
.container {
position: relative;
background: black;
width: 200px; height: 200px; }
.subcontainer {
position: absolute;
bottom: 10px; width: 100%; height: 20px;
background: red;
transition: background 2s 0s }
.container:hover .subcontainer { background: yellow; }
<div class="container">
<div class="subcontainer">
</div>
</div>
I'm trying to create the effect of an opening door in css.
The issue I'm having is that the part which rotates also slides along the y axis. A door has a fixed rotation point, which is not really working here.
How can I prevent this sliding and ensure that the right part of the div .mover stays fixed to the right of the div .door?
.door {
background-color: blue;
width: 100px;
height:100px;
margin-left: 300px;
display: block;
}
.mover {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
}
.door:hover .mover {
transform-origin: 100% 40%;
transform: rotate3d(0,1,0,180deg);
}
<div class="door">
<div class="mover">a</div>
</div>
Move the transform-origin to the base .mover selector, instead of the .door:hover .mover selector. Like this:
.door {
background-color: blue;
width: 100px;
height:100px;
margin-left: 300px;
display: block;
}
.mover {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
transform-origin: 100% 40%;
}
.door:hover .mover {
transform: rotate3d(0,1,0,180deg);
}
<div class="door">
<div class="mover">a</div>
</div>
I have a problem with 2 divs dividing a container in 2 width 50% width.
When hovering over one it extends to 60/40%.
The problem is: While hovering over 1 (So it is extended) then quickly hovering over the other, the z-index is clipping.
check out this fiddle for an example:
https://jsfiddle.net/h9vs79as/
I need the new transition to fire after the reversing transition has ended...
HTML
<div class="container">
<div class="one">div 1</div>
<div class="two">div 2</div>
</div>
CSS
.container { height: 200px; width: 500px; position: relative; }
.container div { position: absolute; height: 200px; width: 50%; z-index: 100; transition: all .5s ease; }
.one { left: 0; background-color: #00ff00; }
.two { right: 0; background-color: #ff00ff; }
.container div:hover { width: 60%; z-index: 150; transition: all .5s ease; }
You can do this with flexbox and no positioning or z-index:
.container {
height: 200px;
width: 500px;
position: relative;
display: flex;
}
.container div {
flex: 1 1 50%;
transition: all .5s ease;
}
.one {
background-color: #00ff00;
}
.two {
background-color: #ff00ff;
}
.container div:hover {
flex: 0 0 60%;
transition: all .5s ease;
}
<div class="container">
<div class="one">div 1</div>
<div class="two">div 2</div>
</div>
I have div elements that are 200px tall and 200px wide, and I am filling each div element with an image of a person.
Upon hovering on the image, I want the image to be blurred, but I simultaneously want text to appear on the image (unblurred) that gives a description of who they are. Does anyone know how to do this?
So far, this is what I am getting:
Here is the CSS code:
.mem1 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
background-image: url(members/giles.png);
}
.mem1 p {
text-align: center;
position: absolute;
margin: 70px 30px;
visibility: hidden;
}
.mem1:hover {
-webkit-filter: blur(2px);
}
.mem1:hover p {
text-align: center;
position: absolute;
margin: 70px 30px;
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}
It sounds like the text is a child of the element that you are blurring. You can't do that. You need to do something like this:
<div class="container">
<div class="blurredPhoto"></div>
<div class="text">Your Text</div>
</div>
.container {
width: 200px;
height: 200px;
position: relative;
}
.blurredPhoto {
position: absolute;
width: 200px;
height: 200px;
}
.text {
position: absolute;
width: 200px;
height: 200px;
}
Then apply your blurring logic only to the .blurredPhoto object.
Here is a code snippet that does what you are looking for - blurring an image when you mouse over it, while simultaneously showing a textual description.
The key is that you need to use the :hover pseudoclass on the div, then when the div is hovered, you blur the image only, and show the description text span.
.blur {
width: 350px;
height: 350px;
}
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur span {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur:hover img {
-webkit-filter: blur(5px);
}
.blur span {
opacity: 0;
position: absolute;
top: 30px;
left: 30px;
}
.blur:hover span {
opacity: 1;
}
<div class="blur pic">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350">
<span>This is a photo of something.</span>
</div>
As #DA explained you need to get a parent container involved. Here's a working fiddle using your example code: https://jsfiddle.net/m25gkqkL/1/
<div class="parent">
<div class="mem1"></div>
<p>Hello World!</p>
</div>
.mem1 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
background-image: url(members/giles.png);
z-index: 1;/* added */
position: relative;/* added */
}
.parent {/* added this */
position: relative;
height: 200px;
width: 262px;
}
.parent p {/* modified */
text-align: center;
position: absolute;
visibility: hidden;
top: 50%;/* modified */
margin-top: -0.5em;/* added */
width: 262px;/* added */
z-index: 2;/* added */
}
.parent:hover .mem1 {/* modified */
-webkit-filter: blur(2px);
}
.parent:hover p {/* modified */
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}
.parent{
position: relative;
}
.text-child{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all .3s ease;
z-index: 1;
}
.text-child h1{
color: black;
text-decoration: none;
font-size: 40px;
}
.parent:hover img{
filter: blur(4px);
}
.parent:hover .text-child{
opacity: 1;
}
<div class="parent">
<div class="text-child">
<h1> hi this is text.<h1>
</div>
<img src="/images/excel.png" alt="">
</div>
This question already has answers here:
How to style the parent element when hovering a child element?
(8 answers)
Closed 9 years ago.
So I have 2 div's they're in each other so like this
<div class="parent">
<div class="child"></div>
</div>
and I want to change the background from .parent when I hover over .parent.
but I want the background to turn normal again when I hover over .child.
so for example: (or http://jsfiddle.net/k3Zdt/1/ )
.parent {
transition:background-color 1s;
width:100px;
height:100px;
background:#3D6AA2;
padding:50px;
}
.parent:hover {
background:#FFF;
}
.child {
height:100px;
width:100px;
background:#355E95;
transition:background-color 1s;
}
.child:hover {
background:#000;
}
<div class="parent">
<div class="child">
</div>
</div>
When I hover over the darkblue area I want the not-so-darkblue area to stay not-so-darkblue instead of changing to white.
I would like to keep this <div> structure. and I dont want a JavaScript solution (I know the JavaScript solution but I want to keep it pure CSS).
Basically you can't : How to style the parent element when hovering a child element?
But a trick is to use a sibling element :
http://jsfiddle.net/k3Zdt/8/
.parent {
width: 100px;
height: 100px;
padding: 50px;
}
.child {
height: 100px;
width: 100px;
background: #355E95;
transition: background-color 1s;
position: relative;
top: -200px;
}
.child:hover {
background: #000;
}
.sibling {
position: relative;
width: 100px;
height: 100px;
padding: 50px;
top: -50px;
left: -50px;
background: #3D6AA2;
transition: background-color 1s;
}
.sibling:hover {
background: #FFF;
}
<div class="parent">
<div class="sibling"></div>
<div class="child"></div>
</div>
You can trick something ;)
Basically, use a :before pseudo-element for the child div, with its same size;
when you hover on the child div, enlarge the :before pseudo-element to cover the father div area; this will cause the father div hover effect to fall down, and then to come back to the original state. A precise combination of z-index is involved too.
Demo: http://jsfiddle.net/gFu8h/ Dark Magic(tm)
.parent {
width: 100px;
height: 100px;
padding: 50px;
transition: background-color 1s;
background: #3D6AA2;
position: relative;
z-index: 1;
}
.parent:hover{
background: #FFF;
}
.child {
height: 100px;
width: 100px;
background: #355E95;
transition: background-color 1s;
position: relative;
}
.child:hover {
background: #000;
}
.child:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
transition: background-color 1s;
}
.child:hover:before{
top: -50px;
bottom: -50px;
left: -50px;
right: -50px;
background: #3D6AA2;
}
<div class="parent">
<div class="child"></div>
</div>