在懸停時放大圖像並添加聚光燈文字

我在查找有關在鼠標懸停時放大圖像的教程時遇到困難，然後將放大的圖像着色爲黑色，以便可以在上面放置一些文字。在懸停時放大圖像並添加聚光燈文字

這個例子併除了幾乎所有的東西使圖像變大： 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); 
});

這是我的第一個問題，道歉，如果我不清楚或缺少一些信息。

非常感謝您的幫助！

編輯：謝謝鬼！我的最終目標是從中心放大圖像，因爲最終會有4張4X2配置的圖像。

來源

2013-04-28 HatHead

你似乎有陰影的工作，嘗試CSS3轉換'scale'爲擴大影響。 – elclanrs 2013-04-28 22:28:35

你可以使用jQuery這個方法很多，其中之一是使用animate()方法來平滑地改變圖像大小：http://jsfiddle.net/FZG3v/44/

來源

2013-04-28 22:33:43 ghost

謝謝鬼！幾乎完全完美！試圖弄清楚如何從中心放大圖像（而不是從頂部，左邊） – HatHead 2013-04-28 23:34:51

您只需要將'top'和'left'屬性添加到'animate（）'類似於'width'和'height '。更新的代碼：http://jsfiddle.net/FZG3v/45/ – ghost 2013-04-29 00:00:32

非常感謝您的幫助幽靈，非常感謝！ – HatHead 2013-04-29 05:48:37

在懸停時放大圖像並添加聚光燈文字

回答

相關問題