Question

嗨，感谢您的支持，我不知道为什么css图像效果在Firefox中不起作用。有什么想法吗？

非常感谢

＆＃13;

.box-image-effect {
    overflow:hidden;
    background-color:#000;
    height:217px;
    width:auto;
}
.image-effect:hover {
    -webkit-transform:rotate(13deg) scale(1.5);
    -moz-transform:rotate(13deg) scale(1.5);
    -ms-transform:rotate(13deg) scale(1.5);
    -o-transform:rotate(13deg) scale(1.5);
    transform:rotate(13deg) scale(1.5);
    opacity:0.5;
}
.image-effect {
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    -ms-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

＆＃13;

<div class="box-image-effect"><a href="http://209.227.255.112/cominshop2/wp-content/uploads/2015/06/1371_048AS-5-SPORTBADIA-DSC01424.jpg"><img class="alignnone wp-image-129 size-medium" src="http://209.227.255.112/cominshop2/wp-content/uploads/2015/06/1371_048AS-5-SPORTBADIA-DSC01424-290x217.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet" width="290" height="217" /></a>
</div>

＆＃13;

Answer 1

您忘了将.image-effect课程添加到您的图片

＆＃13;

.box-image-effect{
overflow:hidden;
background-color:#000;
height:217px;
width:auto;
}

.image-effect:hover {
-webkit-transform:rotate(13deg) scale(1.5);
  -moz-transform:rotate(13deg) scale(1.5);
  -ms-transform:rotate(13deg) scale(1.5);
  -o-transform:rotate(13deg) scale(1.5);
  transform:rotate(13deg) scale(1.5);
  opacity:0.5;
}
.image-effect {
-webkit-transition:all 0.3s ease-out;
  -moz-transition:all 0.3s ease-out;
  -ms-transition:all 0.3s ease-out;
  -o-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
}

＆＃13;

<div class="box-image-effect">
  <a href="http://209.227.255.112/cominshop2/wp-content/uploads/2015/06/1371_048AS-5-SPORTBADIA-DSC01424.jpg">
    <img class="alignnone wp-image-129 size-medium image-effect" src="http://209.227.255.112/cominshop2/wp-content/uploads/2015/06/1371_048AS-5-SPORTBADIA-DSC01424-290x217.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet" width="290" height="217" />
  </a>
</div>

＆＃13;

Answer 2

这应该有效。请将课程image-effect应用于图片。

Answer 3

img tag上没有类图像效果。请将类图像效果添加到图像中：

<img class="alignnone wp-image-129 size-medium image-effect" src="http://209.227.255.112/cominshop2/wp-content/uploads/2015/06/1371_048AS-5-SPORTBADIA-DSC01424-290x217.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet" width="290" height="217" />

图像css效果不适用于firefox

3 个答案: