I would like to transform the height of my .bar to 3px when hovering .wrapper. I know I have to use transition and transform, but I have no idea how to transform my child div by hovering his parent. At the moment, I transform just my parent div (it's clear why). How to transform height of my child by hovering my parent div (should be a bar coming up/down on the bottom of .wrapper)? Note that the parent div should not transform his dimensions, just the child!
.wrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 200px;
height: 100px;
background-color: lightgreen;
transition: all 1s ease-in-out;
}
.wrapper:hover {
/*ON HOVER WRAPPER TRANSFORM HEIGHT OF BAR TO 3px*/
transform: scale(2);
cursor: pointer;
}
.bar {
width: 100%;
height: 0px;
background-color: blue;
}
.bar:hover {}
<div class="wrapper">
<div class="bar"></div>
</div>
Use the child selector .wrapper:hover>.bar:
.wrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 200px;
height: 100px;
background-color: lightgreen;
transition: all 1s ease-in-out;
}
.wrapper:hover {
cursor: pointer;
}
.bar {
width: 100%;
height: 0px;
background-color: blue;
transition: height 200ms ease-in-out;
}
.wrapper:hover>.bar {
height: 3px;
}
<div class="wrapper">
<div class="bar"></div>
</div>
Use this CSS selector > to do that,
.wrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 200px;
height: 100px;
background-color: lightgreen;
transition: all 1s ease-in-out;
}
/*.wrapper:hover {
transform: scale(2);
cursor: pointer;
}*/
.bar {
width: 100%;
height: 0px;
background-color: blue;
transition: 0.6s ease;
}
.wrapper:hover > .bar {
height: 10px;
}
<div class="wrapper">
<div class="bar"></div>
</div>
Related
I am trying to add scale up animation on a div.
I tried this using both transition and animation property.
In case of transition you can notice that when hovered out the animation is smoothly reversed. However, this doesn't happen when using animation property (the div transitions back to initial width instantly)
Can someone tell me:
Why this behaviour in case of animation only?
How can I achieve the same using animation property?
.animations {
display: flex;
padding: 80px;
width: 100vw;
height: 100vh;
background: linear-gradient(to right, #f3d2d2, white, #cee5f3);
}
.animations > div {
width: 200px;
height: 200px;
margin: 40px;
font-family: system-ui;
display: flex;
flex-direction: column;
align-items: center;
}
.animations > p {
color: black;
flex: 1;
text-align: center;
}
.animations .animated-box {
flex: 2;
width: 100%;
background: grey;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.animated-box.scale-up {
}
.animated-box.scale-up:hover {
animation: scale-up 0.5s ease forwards;
transform: scale(1);
}
.animated-box.scale-up-with-mouseout {
transition: transform 0.5s ease-in;
}
.animated-box.scale-up-with-mouseout:hover {
transform: scale(1.2);
}
#keyframes scale-up {
100% {transform: scale(1.2)};
0%{transform: scale(1)};
}
<div class="animations">
<div>
<div class="animated-box scale-up">Hover me</div>
<p>Scale up (with keyframes)</p>
</div>
<div>
<div class="animated-box scale-up-with-mouseout">Hover me</div>
<p>Scale up (with transition)</p>
</div>
</div>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 4 years ago.
I'm trying to transition the opacity of 2 background images in 2 separate divs while hovering over a 3rd using HTML and CSS. Seems fairly straight forward but I have had no luck searching everything I can on hover targets including not:hover, parents siblings etc. Here is a link to my codepen example. My goal is to affect the opacity of box 1 & 2 by only hovering box 3 (blue box) and reverting back on hover out. All suggestions on restructuring and/or styling are welcome. Thanks.
https://codepen.io/NikoVanDam/pen/Ygzjpz
HTML
<body>
<div class="Container">
<div class="Box1"></div>
<div class="Filler1"></div>
<div class="Box2"></div>
<div class="Filler2"></div>
<div class="Box3"></div>
</div>
</body>
CSS
.Container {
width: 383px;
height: 404px;
background: yellow;
float: left;
}
.Box1 {
width: 383px;
height: 210px;
background: red;
float: left;
opacity: 0.2;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
}
.Filler1 {
width: 130px;
height: 194px;
background: grey;
float: left;
}
.Box2 {
width: 253px;
height: 110px;
background: blue;
float: left;
Opacity: 0.2;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
}
.Filler2 {
width: 160px;
height: 84px;
background: grey;
float: left;
}
.Box3 {
width: 93px;
height: 84px;
background: blue;
float: left;
}
Unfortunately, there's no pure CSS way to accomplish this as .Box3:hover comes after the elements you're wishing to target. Here's a straightforward JavaScript approach as a consolation prize.
const box3 = document.querySelector('.Box3');
const container = document.querySelector('.Container');
box3.addEventListener("mouseover", handleMouseOver);
box3.addEventListener("mouseout", handleMouseOut);
function handleMouseOver() {
container.classList.add('hover');
}
function handleMouseOut() {
container.classList.remove('hover');
}
.Container {
width: 383px;
height: 404px;
background: yellow;
float: left;
}
.Box1 {
width: 383px;
height: 210px;
background: red;
float: left;
opacity: 0.2;
transition: opacity 0.5s ease-in-out;
}
.Filler1 {
width: 130px;
height: 194px;
background: grey;
float: left;
}
.Box2 {
width: 253px;
height: 110px;
background: blue;
float: left;
Opacity: 0.2;
transition: opacity 0.5s ease-in-out;
}
.Filler2 {
width: 160px;
height: 84px;
background: grey;
float: left;
}
.Box3 {
width: 93px;
height: 84px;
background: blue;
float: left;
}
.hover .Box1,
.hover .Box2 {
opacity: .7;
}
<body>
<div class="Container">
<div class="Box1"></div>
<div class="Filler1"></div>
<div class="Box2"></div>
<div class="Filler2"></div>
<div class="Box3"></div>
</div>
</body>
You have to use javascript what you want, here a snippet,
(function() {
var container = document.querySelector('.Container');
var hoverBox = document.querySelector('.hover-box');
hoverBox.addEventListener('mouseover', function(){
container.classList.add('hovered');
});
hoverBox.addEventListener('mouseout', function(){
container.classList.remove('hovered');
});
})();
.Container {
width: 383px;
height: 404px;
background: yellow;
float: left;
}
.color-box {
float: left;
opacity: 0.2;
transition: opacity 0.5s ease-in-out;
}
.gray-box {
background: grey;
float: left;
}
.Box1 {
width: 383px;
height: 210px;
background: red;
}
.Filler1 {
width: 130px;
height: 194px;
}
.Box2 {
width: 253px;
height: 110px;
background: blue;
}
.Filler2 {
width: 160px;
height: 84px;
}
.Box3 {
width: 93px;
height: 84px;
background: blue;
float: left;
}
.hover-box {
cursor: pointer;
}
.hovered .color-box{
opacity: .7
}
<body>
<div class="Container">
<div class="Box1 color-box"></div>
<div class="Filler1 gray-box"></div>
<div class="Box2 color-box"></div>
<div class="Filler2 gray-box"></div>
<div class="Box3 hover-box"></div>
</div>
</body>
I am trying to add transition timing when switching the text alignment via :hover. The transition is added to the color properly, but not the text alignment.
example: Codepen
div {
background-color: #ff4000;
height: 300px;
width: 600px;
}
div:hover>h1 {
color: #ddd;
text-align: right;
transition: .6s ease-in !important;
}
<div>
<h1>Lorem Ipsum</h1>
</div>
I guess it was just the CSS Working Group decided not to implement it for whatever reasons. But there are other ways around, see the following demo by using position and transform tricks.
div {
background-color: #ff4000;
height: 300px;
width: 600px;
position: relative;
}
h1 {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
margin: 0;
transition: 0.6s ease-in;
}
div:hover > h1 {
color: #ddd;
left: 100%;
transform: translateX(-100%);
}
<div>
<h1>Lorem Ipsum</h1>
</div>
Another approach is to animate width.
div {
background-color: #ff4000;
height: 300px;
width: 600px;
}
h1 {
width: 0;
text-align: right;
white-space: nowrap;
margin: 0;
transition: 0.6s ease-in;
}
div:hover > h1 {
color: #ddd;
width: 100%;
}
<div>
<h1>Lorem Ipsum</h1>
</div>
transform: translateX()
text-align is not animatable but position and transforms are -- the latter being the better choice because it's less GPU/CPU intensive than the former. The following is a what was added as the first leg of the animation in the demo.
transform:translateX(300px);
transition: transform .6s ease-in;
Demo
div {
background-color: #ff4000;
height: 300px;
width: 600px;
}
h1 {
transform: translateX(0px);
transition: transform .6s ease-out;
}
div:hover>h1 {
color: #ddd;
width: 200px;
transform: translateX(300px);
transition: transform .6s ease-in;
}
<div>
<h1>Lorem Ipsum</h1>
</div>
I have an absolutely positioned image inside a relatively positioned container.
Height of image is bigger than that of the container.
I want the image to scroll up to its end using only CSS.
The catch is that height of the image could vary, so it makes sense to make sure that bottom of the image is aligned with bottom of the container once hovered.
Following is the code:
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
bottom: 0;
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
Try transition on transform
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: transform 1s ease;
}
img:hover {
transform: translateY(-60%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
EDIT:
As the height is not set, I'd suggest a jQuery/js solution
$("img")
.mouseover(function() {
var offset = -$(this).height() + 200;
$(this).css("top", offset);
})
.mouseleave(function() {
$(this).css("top", 0);
});
body {
display: flex;
justify-content: space-around;
}
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: top 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Vertical-Banner-EN.jpg">
</div>
You need a way to position the element equivalent to bottom: 0px, but taken for the reference the top .
If you set top: 100%, the top of the element will be at the bottom of the parent.
Then, set a transform of 100%, and the bottom will be where the top was.
Notice that this solution works for any image and container height.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0%;
transform: translateY(0%);
transition: all 1s ease;
}
img:hover {
top: 100%;
transform: translateY(-100%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
You can have a transition between bottom: 0 and bottom: calc(100% - 18px), which is the height of the container minus the height of box2.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
}
.box2 {
position: absolute;
height: 18px;
bottom: calc(100% - 18px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.box:hover .box2 {
background-color: green;
bottom: 0;
}
<div class="box">
<div class="box2">
test
</div>
</div>
You can use this, try this with working snippet,
.box{
position:relative;
display:block;
height:200px;
width:200px;
background-color:red;
transition: all 1s ease;
}
.box2{
position: absolute;
transition: all 1s ease;
}
.box:hover .box2{
background-color:green;
margin-top: 180px;
}
<div class="box">
<div class="box2">
test
</div>
</div>
I cant understand why child div showed without fadein effect? I need when I hover on div ("black") then div (red) gradually appeared.. How do it?
Fiddle
HTML
<div class="main">
<div class="ok"></div>
</div>
CSS
.main {
width: 200px;
height: 200px;
background: black;
}
.ok {
width: 50px;
height: 50px;
background: red;
display: none;
-webkit-transition: opacity 1s linear;
opacity: 0;
}
.main:hover .ok{
opacity: 1;
display: block;
}
Thanks
You can't apply the transition when changing the display property:
Transitions on the display: property
Just remove the display part, and it will work:
.ok {
width: 50px;
height: 50px;
background: red;
transition: opacity 1s linear;
opacity: 0;
}
.main:hover .ok{
opacity: 1;
}
Fiddle: http://jsfiddle.net/sGxgv/1/