CSS Transition - 缓解但不缓解？ [英] CSS Transition - eases in but doesn't ease out?

问题描述

我有一个关于我的图片的问题，如这里所示（ http://jsfiddle.net/garethweaver/Y4Buy/1 / ）。

  .img-blur：hover {-webkit-filter：blur（4px）;过渡：所有0.35s缓入; -moz-过渡：所有0.35s缓入; -webkit-过渡：所有0.35s缓入; - 过渡：所有0.35s缓入; -ms-transition：all 0.35s ease-in-out;}  

 < img src =http://i.imgur.com/Vp5StNs.pngclass =img-blur>  

当鼠标悬停时，图像模糊不清，但当我将鼠标移开时，它会直接恢复正常， ？

此外，有没有办法在鼠标悬停时显示文本？当用户将鼠标悬停在图像上时，我想让它模糊，然后显示一些文字，例如了解更多。

干杯

解决方案

元素本身的过渡属性，而不是：hover 伪类版本。

net / jVdg2 /> 更新示例

  .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.pngclass =img-blur/>  

p>

---

如果您想在悬停/停止时使用不同的转换属性，请参阅此示例。

• 元素本身的transition属性将在悬停




• ：hover 伪类的转换在悬停开元素时发生：

  .img -blur {transition：all 0.35s ease-in-out; / *悬停关闭* /}。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.pngclass =img-blur>  

---

如果您希望在悬停时添加文本，请查看这两个过去的答案。

• http://stackoverflow.com/a/18322705/2680216




• http://stackoverflow.com/ a / 21371665/2680216

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

解决方案

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.

• http://stackoverflow.com/a/18322705/2680216

• http://stackoverflow.com/a/21371665/2680216

这篇关于CSS Transition - 缓解但不缓解？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！