CODEWITHSUNDEEP
csshovercss-transitionstransitioncss-transforms
Barney
Barney

Reputation: 1848

How to add different CSS3 hover transitions on hover out with CSS

my question relates specifically to attempting a different CSS background transition on hover out, than the transition for hover in, using CSS.

This question references the CSS3 hover effects available at Ian Lunn GitHub CSS3 Hover effects

See codepen here, or view code below. Code:

<style>

.hvr-shutter-in-horizontal {
  display: inline-block;
  vertical-align: middle;
    background: rgba(121,61,61, 0.7);

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-shutter-in-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
    background: rgba(77,79,79, 0.7);

  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
  color: white;
}
.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
</style>


<a href="#" class="hvr-shutter-in-horizontal">View our Training Workshops</a>

I would like to change the mouse-out for this button, to be the same mouse-out as the following CSS produces:

/* Sweep To Bottom */
.hvr-sweep-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
  color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

Upvotes: 0

Views: 1059

Answers (1)

Asons
Asons

Reputation: 87191

Here is a sample of the concept, which animate the height on mouse over and the color on mouse out

Based on a comment it's updated with a pseudo element

div {
  position: relative;
  height: 30px;
  background: red;
  transition: background 1s;
}
div:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  right: 0;
  height: 100%;
  background: red;
  transition: background 1s;
}

div:hover {
  height: 120px;
  background: blue;
  transition: height 1s;
}
div:hover:after {
  top: 100%;
  background: yellow;
  transition: top 1s;
}
<div></div>

Upvotes: 2

Related Questions