1

画像上に、元の画像が引き続き表示されるように、とを使用hoverして別の小さな画像を表示したいと思います。ホバー効果を遅くするためにを使用したいと思います。だから、これが私が試していることと機能していないことです：backgroundopacitytransition

HTML：

<img src="http://i50.tinypic.com/2poy3kl.jpg" class="test" />

CSS：

.test {
   background: red url("http://i50.tinypic.com/10mue4k.png");
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
}

.test:hover {
    opacity: 0.5;   
}

JSフィドル： http： //jsfiddle.net/AXQW4/2/

誰かがこれを手伝ってくれませんか？

4

4 に答える 4

3

このために追加のラッパーが必要になります。正確に画像のサイズ、そしてその背景を与えます。次に、画像にカーソルを合わせると、画像が非表示になり、下にある背景が表示されます。

実例

HTML

<div class="background">
    <img src="http://i50.tinypic.com/2poy3kl.jpg">
</div>

CSS

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
}
.background {
    background: url("http://i50.tinypic.com/10mue4k.png");
    display: inline-block;
    font-size: 0;
}
.background img {
    -webkit-transition: all .5s;
}
.background img:hover {
    opacity: 0.5;
}

画像の正確な寸法を知る必要はありません。

于 2012-09-26T11:03:02.177 に答える
3

これはあなたが探していたものですか：http：//jsfiddle.net/AXQW4/3/

于 2012-09-26T11:05:02.117 に答える
2

もう1つのデモ:)

http://jsfiddle.net/AXQW4/7/

于 2012-09-26T11:17:44.423 に答える
1

これはあなたが望むものですか デモ またはこのリンク

.test {
   background: red url("http://i50.tinypic.com/10mue4k.png");

 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.test:hover {
  opacity:.5;
}
于 2012-09-26T11:05:45.733 に答える