CSS过渡 - 缓解但不缓和？

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

关于我的图像我有一个小问题,如图所示(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?

还有,鼠标悬停时有没有办法显示文字?当用户将鼠标悬停在图像上时,我希望它模糊,然后显示一些文本,例如“了解更多”。只有css这也是可能的吗?

Cheers

1 个解决方案

#1

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

将过渡属性添加到元素本身而不是:hover伪类版本。

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:

当悬停在元素上时,将发生:hover伪类的转换:

.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.

如果您希望在悬停时添加文本,请查看这些过去的答案中的任何一个。

#1