18

I have a wee problem concerning my images, as shown here (http://jsfiddle.net/garethweaver/Y4Buy/1/).

.img-blur:hover {
  -webkit-filter: blur(4px);
  transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
}
<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

The image blurs when the mouse hovers but when I take my mouse off it goes straight back to normal, how can I make it ease out of the blur?

Also, is there a way to show text when the mouse hovers over? When the user hovers over the image I want it to blur and then show some text such as "Learn More". Is this also possible with just css?

Cheers

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Gareth
  • 223
  • 1
  • 3
  • 12

2 Answers2

57

Add the transition properties to the element itself rather than the :hover pseudo-class version.

In doing so, the transition will take place when hovering on and off.

Updated Example

.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur" />

If you want different transition properties when hovering on/off, see this example.

  • The transition property on the element itself will take place when hovering off of the element.

  • The transition on the :hover pseudo class will take place when hovering on the element:

.img-blur {
    transition: all 0.35s ease-in-out;   /* Hover off */
}
.img-blur:hover {
    -moz-filter: blur(4px);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    transition: all 1s ease-in;         /* On hover */
}
<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

If you want text to be added on hover, take a look at either of these past answers.

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
0

Gotta remember you need to tell the computer what happens when it is not getting hovered over. Why you need to add a transition property into the class when its not getting hovered.

here is the CSS:

.nav__menuIcon--button {
    visibility: hidden;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-color: transparent;
    border-width: 0;
    transition: all 300ms ease-in;
}

.nav__menuIcon--button:hover {
    color: red;
    transition: all 300ms ease-in;
}
Calvin
  • 1