HTML Hovering Image Code

Question

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

<div id="imgmenu"> 
<div class="p1" title="Karla"><img src="small image" title="Thumbnail image" alt="Thumbnail image"/><img class="large" src="large image" title="enlarged view of image" alt="enlarged view of image" /></div></div> 
<style type="text/css"> 
<#imgmenu {position:relative; top:10px; left:10px; width:75px; background-color:#fff; z-index:100;} 
#imgmenu .p1 {display:block; width:150px; height:150px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#imgmenu .p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;} 
#imgmenu .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;} 
#imgmenu .p1:hover .large {display:block; position:absolute; top:-0px; left:150px; width:400px; height:300px; border:2px solid #ccc;} 
#info {z-index:100; height:22em;} 
</style> 


<div id="imgmenu"> 
<div class="p1" title="Beanie"><img src="small image" title="Thumbnail image" alt="Thumbnail image"/><img class="large" src="large image" title="enlarged view of image" alt="enlarged view of image" /></div></div> 
<style type="text/css"> 
<#imgmenu {position:relative; top:10px; left:10px; width:75px; background-color:#fff; z-index:100;} 
#imgmenu .p1 {display:block; width:150px; height:150px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#imgmenu .p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;} 
#imgmenu .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;} 
#imgmenu .p1:hover .large {display:block; position:absolute; top:-0px; left:150px; width:400px; height:300px; border:2px solid #ccc;} 
#info {z-index:100; height:22em;} 
    </style> 

Answer 1

В коде есть несколько ошибок. Когда вы определяете идентификатор элемента в своем HTML, он должен быть уникальным: здесь вы используете <div id="imgmenu"> для двух элементов. Вместо этого используйте классы. Кроме того, нет необходимости определять стили CSS дважды. Вот jsFiddle где я установил несколько вещей, и вот HTML:

<div class="imgmenu"> 
<div class="p1" title="Karla"> 
    <img src="http://placekitten.com/100/100" /> 
    <img class="large" src="http://placekitten.com/200/200" /> 
</div> 
</div> 

<div class="imgmenu"> 
<div class="p1" title="Beanie"> 
    <img src="http://placekitten.com/100/100" /> 
    <img class="large" src="http://placekitten.com/200/200" /> 
</div> 
</div> 

И вот CSS:

.imgmenu { 
    position:relative; 
    top:10px; 
    left:10px; 
    width:75px; 
    background-color:#fff; 
    z-index:100;} 

.imgmenu .p1 { 
    width:150px; 
    height:150px; 
    background:#fff;} 

.imgmenu .p1:hover { 
    background-color:#8c97a3; 
    color:#000;} 

.imgmenu .large { 
    position:absolute; width:0; height:0; border:0; top:0; left:0;} 

.imgmenu .p1:hover .large { 
    position:absolute; 
    left:150px; 
    width:400px; 
    height:300px; 
    border:2px solid #ccc;}