Is there a way to slow down the hover effect?

1 Views

Is there a way to slow down a hover effect? I have a hover effect on my site (removed) that displays text on hover of the images. I want to slow down the effect by a little. It’s a tad jarring how quickly the picture switches over.

How would I do that?

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. You could add css3 transitions: 

    -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

  2. It depends on how you’re displaying the text. If you’re changing a CSS property you can do this with CSS3 transitions. Below is an example.

    HTML:

    <div id="A"></div><div id="B"></div>

    CSS:

    div {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;

    -moz-transition: opacity 4s; /* Firefox */
    -webkit-transition: opacity 4s; /* Safari and Chrome */
    -o-transition: opacity 4s; /* Opera */
    transition: opacity 4s;
}
#A {
    background: red;
    opacity: 1;
    z-index: 1;
}
#B {
    background: blue;
    opacity: 0;
    z-index: 2;
}
#B:hover {
    opacity: 1;
}

    Demo

    Edit: David Thomas has told me that you cannot change the display with transitions. I have updated the above to use opacity.

  3. I know this is quite a bit late but look into CSS3 animations. I use an animation on one of my Garry’s Mod loading screens. 

    /* Styles go here */

button {
  margin-left: 50%;
  margin-right: 50%;
}
button:hover {
  -webkit-animation: breathing 5s ease-out infinite normal;
  animation: breathing 5s ease-out infinite normal;
}
@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
    <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <p>Below I have a button that changes size on mouse hover useing CSS3</p>
  <button>Hover over me!</button>
</body>

</html>

    I know it’s not quite the result your looking for but I’m sure you and others can find this useful.