image overlay on hover javascript

Question

Я пытаюсь отобразить дополнительную информацию об изображении, используя два наложения изображений. на парения мыши Overlay1 будет отображаться в верхнем левом углу основного образа и overlay2 будет в правом нижнем углу ..

, когда я пытаюсь это сделать на одном изображении он прекрасно работает .. , но, как я сделайте это на галерее изображений, наложенные изображения отображаются в верхнем левом и нижнем правом углу экрана.

Я хочу, чтобы изображения были наложены на соответствующие основные изображения ..

вот html-

<div id="WhizIt"> 
<div id="btpanelexsmall"> 
<h3>Heading1</h3> 

<ul > 
<li><a href=""><img src="image/" class="wit"/><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 
</ul><br> 

<ul> 
<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 

<li><a href=""><img src="images/arrow1.jpg" class="wit" /><img class="overlay" 
src="image/top-left.jpg"/> 
<img class="overly" src="image/bottom-right.jpg"/></a></li> 
</ul> 
</div> 
</div> 

сценарий

это-

<script src="js/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
      $('ul li').mouseenter(function() { 
       $(this).find(".overlay").show(); 
       $(this).find(".overly").show(); 
      }); 
      $('ul li').mouseleave(function() { 
       $(this).find(".overlay").hide(); 
       $(this).find(".overly").hide(); 
      }); 
     }); 
</script> 

и css-

.WhizIt li{position:relative; 
float:left; 
padding-left:5px; 
list-style:none;} 


.overlay 
{ 
position:absolute; 
height:50px; 
width:150px; 
top:0; 
left:0; 
display:none;} 



.overly 
{ 
position:absolute; 
height:50px; 
width:150px; 
bottom:0; 
right:0; 
display:none;} 

#btpanelexsmall{height:390px; 
margin:0px; 
padding:0px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
border:2px solid yellow; 
background: #f0f0f0;} 

У меня есть много галерей, на моей странице !! Заранее спасибо

Answer 1

Я думаю, что ваша первая проблема решена. Теперь, чтобы придать эффект «rotate» для наложенных изображений, используйте анимацию css3. Мы можем сделать это с помощью jquery, но я думаю, что использование css3 будет хорошим.

Для этого эффекта используйте этот сценарий: -

$(document).ready(function() { 
       $('ul li').mouseenter(function() { 
        $(this).find(".overlay").show().addClass('rotate'); 
        $(this).find(".overly").show().addClass('rotate'); 
       }); 
       $('ul li').mouseleave(function() { 
        $(this).find(".overlay").hide().removeClass('rotate'); 
        $(this).find(".overly").hide().removeClass('rotate'); 
       }); 
      }); 

Добавить эту CSS: -

.rotate { 
    -webkit-animation: rotateImg 1s linear; 
    -moz-animation: rotateImg 1s linear; 
    -ms-animation: rotateImg 1s linear; 
    -o-animation: rotateImg 1s linear; 
    animation: rotateImg 1s linear; 
} 

@keyframes "rotateImg" { 
    50% { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 
100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 

} 

@-moz-keyframes "rotateImg" { 
    50% { 
    -moz-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 
100% { 
    -moz-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 

} 

@-webkit-keyframes "rotateImg" { 
    50% { 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 
100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 

} 

@-ms-keyframes "rotateImg" { 
    50% { 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 
100% { 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 

} 

@-o-keyframes "rotateImg" { 
    50% { 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 
100% { 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 

} 

Answer 2

Попробуйте этот код:

<div id="WhizIt"> 
<div id="btpanelexsmall"> 
<h3>Heading1</h3> 

<ul > 
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li> 
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li> 
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li> 
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li> 

</ul><br> 

<ul> 
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li> 
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li> 
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li> 
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li> 

</ul> 
</div> 
</div> 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
      $('ul li').mouseenter(function() { 
       $(this).find(".overlay").show(); 
       $(this).find(".overly_left").show(); 
       $(this).find(".overly").show(); 
      }); 
      $('ul li').mouseleave(function() { 
       $(this).find(".overlay").hide(); 
       $(this).find(".overly_left").hide(); 
       $(this).find(".overly").hide(); 
      }); 

     }); 
</script> 
<style> 
.WhizIt li{position:relative; 
float:left; 
padding-left:5px; 
list-style:none;} 


.overlay 
{ 
position:absolute; 
height:50px; 
width:150px; 
top:0; 
left:0; 
display:none;} 

.overly_left 
{ 
position:absolute; 
height:50px; 
width:50px; 
top:0; 
left:0; 
display:none;} 


.overly 
{ 
position:absolute; 
height:50px; 
width:50px; 
bottom:0; 
right:0; 
display:none;} 

#btpanelexsmall{height:390px; 
margin:0px; 
padding:0px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
border:2px solid yellow; 
background: #f0f0f0;} 
</style>