1

このウェブサイトのようにマウスオーバーすると、拡大鏡または画像が別の画像の上に表示されるようにしたいと思います - http://www.elegantthemes.com/gallery/画像の上にカーソルを置くと、その上に画像が表示されます。これを達成する方法を知っている人はいますか？

コードが必要かどうかはわかりませんが、img タグの CSS は次のとおりです。

img {
width: 600px;
height: 342px;
border-radius: 1px;
}
4

6 に答える 6

5

あなたはそれを行うことができます

HTML

<div id="yourImage" ></div>

CSS

#yourImage {
 background-image: url('image1.jpg');
}


#yourImage:hover {
 background-image: url('overimage.jpg'), url('image1.jpg');
}
于 2012-07-08T16:00:51.830 に答える
3

これにはjqueryプラグインがあります。

最初の効果は、あなたが探しているものです。

于 2012-07-08T15:59:08.620 に答える
3

これを試すことができます。CSSのみを使用していると思います。

于 2012-07-08T16:01:40.660 に答える
1

position両方の要素を同じ場所に配置できるように、CSS 属性を確認する必要があります。そしてopacity、ホバー画像の を変更するだけです。

于 2012-07-08T16:00:44.197 に答える
0

これを試して：

HTML:

<div class="your-img">
    <div class="your-hover"></div>
</div>

CSS:

.your-img {
    width: 300px; /* your image width and height here */
    height: 225px;
    background-image: url('../img/image_01.png');
}
.your-hover {
    width: 300px;
    height: 225px;
    opacity: 0;
    filter: alpha(opacity = 0);
    background-image: url('../img/image-hover_01.png');
}
.your-hover:hover {
    opacity: 0.5;
    filter: alpha(opacity = 50);
}

filter: alphaIE用です、お役に立てば幸いです。

于 2012-07-08T20:12:52.140 に答える
0

@Mateuszには最良の答えがありますが、次の行に沿ってcssトランジションを追加することで改善します。

-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
于 2012-07-08T18:51:31.103 に答える