Прозрачное изображение на другое изображение как зависание

Question

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

Я нашел это: http://demo.fearlessflyer.com/html/demo/pretty-hovers/, но я не смог удалить название из него.

Мой текущий код очень прост:

HTML:

<div id="gallery"> 
<img src="img/w.jpg" alt="" /> 
<img src="img/sr.jpg" alt="" /> 
<img src="img/as.jpg" alt="" /> 
</div> 

CSS:

#gallery img { width: 160px; height: 160px; padding: 4px; border: 1px #666 solid; } 

Я хотел бы избежать место любых контейнеров, пядь, классов и т.д. в HTML код. Я предпочитаю иметь его в источнике CSS/JS.

Я хочу, чтобы эффект похож:

http://oi44.tinypic.com/eq6phd.jpg

Спасибо за любой ответ.

С уважением.

Answer 1

Есть ли особая причина, побуждающая вас избегать использования элементов div? Хотя я считаю, что можно обойтись без них, я сомневаюсь, что вы найдете «хорошее» решение. Я бы, наверное, попробовать что-то вроде:

HTML:

<div id="gallery"> 
... 
<div id="DivToHover1"><img id="imgToHide" src="yourTransparentPicture"/></div> 
... 
</div> 

Css:

... 
#DivToHover1 { 
    height: "your picture height"; 
    width: "your picture width"; 
    background-image:url("yourpicture"); 
} 

#imgToHide { 
    display:none; 
} 
... 

ЯШ:

... 
$("#DivToHover1").hover(function() { 
    $("#imgToHide").show(); 
    //do some more funky stuff 
}); 
...