1

マウスのホバー時に画像を拡大し、拡大した画像を暗くして、その上にテキストを配置できるようにするチュートリアルを見つけるのに苦労しています。

この例では、画像を大きくする以外はほとんどすべてのことを行います: http://jsfiddle.net/balupton/FZG3v/

CSS:

.ih { position:relative; }
.ih, .ih-image, .ih-info { display:block;width:330px;height:220px; }
.ih-image, .ih-info { z-index:500;position:absolute;top:0;left:0;right:0;bottom:0; }
.ih-info { z-index:501;background:black;color:white; }

HTML:

<img class="ih-image" src="http://designsnack.com/screenshots/image.php width=330&amp;height=220&amp;cropratio=330:220&amp;image=/screenshots/8264948088.jpg"/>
     <div class="ih-info">
         Your overlay content
     </div>
</div>

JS:

$(function(){
$('.ih').hover(
    // Over
    function(){
        var $ih = $(this);
        $ih.find('.ih-info').stop(true,true).animate({opacity:0.8}, 400);
    },
    // Out
    function(){
        var $ih = $(this);
        $ih.find('.ih-info').stop(true,true).animate({opacity:0}, 400);
    }
).find('.ih-info').css('opacity',0);
});

それは私の最初の質問です。明確でない場合や情報が不足している場合はお詫び申し上げます。

助けてくれてありがとう！

編集：ありがとうゴースト！私の最終的な目標は、最終的には 4X2 構成で 4 つの画像になるため、画像を中央から拡大することです。

4

1 に答える 1