Question

我正在尝试为我的网站的投资组合部分设置转换，我需要悬停投资组合大拇指的效果，我在CSS中有以下代码：

.proimg img {
  height: 100%;
  max-width: 100%; 
}

.proimg img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); 
  transition: all 0.55s ease-in-out;
}

那是投资组合页面http://goo.gl/Gaja7v 在悬停时，图像看起来不太好。过渡工作，但它搞砸了拇指，看起来不太好。我想过渡到与此网站类似的http://goo.gl/0hb56Z

任何人都可以提供帮助吗？

Answer 1

首先，您必须为此调整列表图像的大小！

-

我推荐jQuery，fadeTo函数

//you have to include jquery lib
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

//HTML : 
<img src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">

//Javascript :
<script>
$('img').mouseenter(function() {
    $(this).fadeTo('fast', 0.7);
}).mouseleave(function(){
    $(this).fadeTo('fast', 1);
});
</script>

您可以获得有关淡入功能的更多信息 - http://www.w3schools.com/jquery/eff_fadeto.asp

如果您不想使用fadeTo功能。

//CSS 
.fadeeffect {
            -webkit-transition: opacity 250ms ease-in-out;
            -moz-transition: opacity 250ms ease-in-out;
            -o-transition: opacity 250ms ease-in-out;
             transition: opacity 250ms ease-in-out;
}

//Javascript 
$(document).ready(function() {
            $('img').mouseenter(function() {
                $(this).css('opacity', 0.7);
            }).mouseleave(function(){
                $(this).css('opacity', 1);
            });
});

//HTML
<img class="fadeeffect" id="a" src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">

Answer 2

很容易将过渡属性视为＆＃34;动作＆＃34;：例如，＆＃34;当这样：悬停状态开始时，转换给定的属性＆＃34;但是你真的需要把它想象成一个常量状态，这意味着＆＃34; 当以下属性因任何原因改变时，以这种方式转换它们。＆＃34;

所以你真的希望transition属性在你的第一个CSS规则上，所以它总是适用。否则，转换仅在鼠标开始悬停时，而不是在它离开时。

Answer 3

您还需要将过渡属性设置为img：

.proimg img {
  height: 100%;
  max-width: 100%; 
  transition: all 0.55s ease-in-out; /* this line */
}

.proimg img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); 
  transition: all 0.55s ease-in-out;
}

http://codepen.io/anon/pen/ZbPKVR

Katana314的回答解释了这一点。

CSS转换easy-in-out没有搞砸悬停时的图像

3 个答案: