Triggering multiple CSS animations with hovering over one element

Question

I am having issues triggering multiple css hover animations. Currently there are 3 different divs that all need different animations when the main parent div is hovered over with a mouse.

<div class="col-lg-7 dasHb">
   <div id="dashBoard"></div>
   <div id="dashCircle"></div>
   <div id="dashTri"></div>
 </div>

div#dashBoard{
background: url(../img/homepage_dashboard_image.svg) no-repeat;
background-size: contain;
height: 93.4rem;
width: 100%;
position: absolute;
left: -2rem;
top: -4rem;
}
div#dashBoard:hover{
transform: rotateY(-22deg) rotateX(-7deg) rotateZ(3deg);
transition: all 600ms;
}

div#dashCircle{
background: url(../img/graphic_circle_purple.svg) no-repeat;
background-size: contain;
height: 7.4rem;
width: 17%;
position: absolute;
left: -2rem;
top: 4rem;
z-index: -3;
}
div#dashCircle:hover{
top: -8rem;
transition: all 600ms;
}

div#dashTri{
background: url(../img/graphic_triangle.svg) no-repeat;
background-size: contain;
height: 6.4rem;
width: 17%;
position: absolute;
z-index: -3;
top: 17rem;
left: 30rem;
transform: rotateZ(39deg);
}
div#dashTri:hover{
transform: rotateZ(-71deg);
transition: all 600ms;
top: 18rem;
left: 29rem;}

I would like the 3 divs (dashBoard, dashCircle, dashTri) to all go through their respective animations/transforms when the main dasHb div is hovered over. Can anybody please help?

Thanks.

לבני מלכה · Accepted Answer · 2019-01-21 08:07:51Z

Intead use div#dashCircle:hover use .dasHb:hover #dashCircle{} ...

div#dashBoard{
background: url(https://i.sstatic.net/3mG2d.jpg) no-repeat;
background-size: contain;
height: 93.4rem;
width: 100%;
position: absolute;
left: -2rem;
top: -4rem;
}
.dasHb:hover #dashBoard{
transform: rotateY(-22deg) rotateX(-7deg) rotateZ(3deg);
transition: all 600ms;
}

div#dashCircle{
background: url(https://i.sstatic.net/3mG2d.jpg) no-repeat;
background-size: contain;
height: 7.4rem;
width: 17%;
position: absolute;
left: -2rem;
top: 4rem;
z-index: -3;
}
.dasHb:hover #dashCircle{
top: -8rem;
transition: all 600ms;
}

div#dashTri{
background: url(https://i.sstatic.net/3mG2d.jpg) no-repeat;
background-size: contain;
height: 6.4rem;
width: 17%;
position: absolute;
z-index: -3;
top: 17rem;
left: 30rem;
transform: rotateZ(39deg);
}
.dasHb:hover #dashTri{
transform: rotateZ(-71deg);
transition: all 600ms;
top: 18rem;
left: 29rem;}

<div class="col-lg-7 dasHb">
   <div id="dashBoard">dashBoard</div>
   <div id="dashCircle">dashCircle</div>
   <div id="dashTri">dashTri</div>
 </div>

ksav · Accepted Answer · 2019-01-21 08:17:42Z

2

More your :hover pseudo-class up to the parent .dasHb and then select each child and apply the desired transform.

.svg {
  width: 200px;
  height: 60px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.dasHb:hover .red {
  transform: rotateZ(-71deg) translate(29rem, 18rem);
  transition: transform 600ms;
}
.dasHb:hover .green {
  transform: translatey(-8rem);
  transition: all 600ms;
}
.dasHb:hover .blue {
  transform: rotateY(-22deg) rotateX(-7deg) rotateZ(3deg);
  transition: transform 600ms;
}

<div class="dasHb">
  <div class="svg red"></div>
  <div class="svg green"></div>
  <div class="svg blue"></div>
</div>

Codepen

answered Jan 21, 2019 at 8:17

ksav

20.9k6 gold badges52 silver badges69 bronze badges

Collectives™ on Stack Overflow

Triggering multiple CSS animations with hovering over one element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related