Home How can I apply transitions to the same elements but in different states of :hover

Questions

How can I apply transitions to the same elements but in different states of :hover

June 13, 2022

I’m building a responsive slider and I have a navigation arrow on each side. I’d like the arrows to be hidden unless the user hovers over them in which case they’ll have a smooth transition from opacity:0 to opacity: 1 which I like. I’d then like my fa-icons to have a smooth scale transition when hovered over (again, while the user is still inside of the slider) but I’m running into an issue where the icon :hover transition (scale) doesn’t occur. The scale transition was working before I decided to do the hidden controls design so I know it’s not that the transitions themselves aren’t working, I just think there’s a hierarchy conflict of some kind that I can’t seem to solve.

I know I could solve this by doing a mouse-in and mouse-out animation in Javascript and just separate effects by doing transition on one and animations on the other, but I’m curious to know if there’s a CSS solution to this that I’m just not able to figure out?

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkgrey;
}

.slideShowContainer {
  display: flex;
  flex-direction: row;
  background-color: #414141;
  position: relative;
  width: 100%;
  height: 40vw;
  margin: 0 auto;
  padding: 0;
  z-index: 1;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.fa-chevron-right {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  right: 0;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform-origin: center;
  transform: scale(1);
  transition: transform 1s linear;
}

.fa-chevron-left {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  left: 0;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform: scale(1);
  transition: transform 1s linear;
}

.fa-chevron-right:hover {
  transform: scale(1.2);
  transition: transform 1s linear;
}

.fa-chevron-left:hover {
  transform: scale(1.2);
  transition: transform 1s linear;
}

.slideShowContainer:hover .fa-chevron-right {
  opacity: 1;
  transition: opacity 0.3s linear;
}

.slideShowContainer:hover .fa-chevron-left {
  opacity: 1;
  transition: opacity 0.3s linear;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<body>
  <div class="slideShowContainer">
    <i id="slideRight" class="fa fa-chevron-right"></i>
    <i id="slideLeft" class="fa fa-chevron-left"></i>
  </div>
</body>

>Solution :

There were a few problems:

Your CSS was getting overridden on specificity, so you didn’t necessarily always have the transition property you intended
Changing transition properties on state changes often won’t work– it’s better, if at all possible, to collapse all properties you want transitioned into a single comma-separated declaration
Critically, you were trying to transition scale, but that is just the transform being applied to the transform property– there is no CSS scale property

I fixed these in the below snippet and it now works as expected.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkgrey;
}

.slideShowContainer {
  display: flex;
  flex-direction: row;
  background-color: #414141;
  position: relative;
  width: 100%;
  height: 40vw;
  margin: 0 auto;
  padding: 0;
  z-index: 1;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.fa-chevron-right {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  right: 0;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform-origin: center;
  transition: transform 1s linear, opacity 0.3s linear;
}

.fa-chevron-left {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  left: 0;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform: scale(1);
  transition: transform 1s linear, opacity 0.3s linear;
}

.fa-chevron-right:hover {
  transform: scale(1.2);
}

.fa-chevron-left:hover {
  transform: scale(1.2);
}

.slideShowContainer:hover .fa-chevron-right {
  opacity: 1;
}

.slideShowContainer:hover .fa-chevron-left {
  opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<body>
  <div class="slideShowContainer">
    <i id="slideRight" class="fa fa-chevron-right"></i>
    <i id="slideLeft" class="fa fa-chevron-left"></i>
  </div>
</body>