ワードプレスのイメージホバーに虫めがねのオーバーレイ

Question

私はthisギャラリーを持っています。私はあなたがイメージを大きくすることができることを容易に見ることができるように、画像をホバーするときに虫眼鏡（または何か）を適用したい。 私が望む効果はthis oneと似ています。

私はwordpressのさまざまなファイルを探していましたが、私の問題は画像にリンクの中に <span class="roll" ></span>を追加できないことです。

誰でもこれを行う方法が分かっている場合は、教えてください。 :-)

ありがとうございました。

私はCSSのfooter.php

<script> 
//$('a.image:link').prepend('<span class="roll"></span>'); 
$('.gallery-icon a:link').each(function() { 
    $(this).prepend('<span class="roll"></span>'); 
    // OR 
    //$(this).wrapInner('<span class="roll"></span>'); 
}); 
</script> 

<script> 
$(function() { 
// OPACITY OF BUTTON SET TO 0% 
$(".roll").css("opacity","0"); 

// ON MOUSE OVER 
$(".roll").hover(function() { 

// SET OPACITY TO 70% 
$(this).stop().animate({ 
opacity: .7 
}, "slow"); 
}, 

// ON MOUSE OUT 
function() { 

// SET OPACITY BACK TO 50% 
$(this).stop().animate({ 
opacity: 1 
}, "slow"); 
}); 
}); 
</script> 

と、この中にこれを入れています。

span.roll { 
    background:url(images/zoom.png) center center no-repeat #000; 
    height: 120px; 
    position: absolute; 
    width: 150px; 
    z-index: 7000; 
    -webkit-box-shadow: 0px 0px 4px #ff0066; 
    -moz-box-shadow: 0px 0px 4px #ff0066; 
    box-shadow: 0px 0px 4px #ff0066; 
} 

私は私のwebdeveloperからのコードで見ると、それは次のようになります。

ワードプレスはすべて私のCSSを上書きするようにそれはだ、など。

Answer 1

方法を追加するようにjQueryを使っについて（先頭に追加）あなたのリンクにスパン？ あなたのコードを見ることなく、HERESに小さなティーザーズーム機能無効JavaScriptを使用して

$('.IMAGELINK').each(function() { 
    $(this).prepend('<span class="roll"></span>'); 
    // OR 
    $(this).wrapInner('<span class="roll"></span>'); 
}); 

は を無効にしてしまうので、このスパンは、コードに追加されwould'nt。