Размер и размер изображения при наведении увеличить

Question

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

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

http://jsfiddle.net/fj8hP

jsFiddle не играет так же, как мой сайт ... но это дает лучшую визуализацию моей проблемы.

Часть изображения, белая коробка, кажется, имеет прямую корреляцию с размером изображения. У меня были короткие и длинные изображения, так что это было прекрасно, но теперь я имею дело с более широкими изображениями и не люблю коробку, охватывающую весь образ. Поэтому, если я установил ширину 300px в этой части

ul.enlarge2 span { 
    position:absolute; 
    height:10px; 
    width:300px; 
} 

изображение будет показано в необходимом размере. Я хочу, чтобы она была не больше 100 и была сосредоточена на изображении. Есть идеи?

Вот CSS:

ul.enlarge2 { 
    list-style-type:none; 
    /*remove the bullet point*/ 
    margin-left:0; 
} 
ul.enlarge2 li { 
    display:inline-block; 
    /*places the images in a line*/ 
    position: relative; 
    z-index: 0; 
    /*resets the stack order of the list items - later we'll increase this*/ 
    margin:5px 10px 0 10px; 
} 
ul.enlarge2 img { 
    background-color:#eae9d4; 
    padding: 6px; 
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
    box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
ul.enlarge2 span { 
    position:absolute; 
    height:10px; 
    width:100px; 
    left: -9999px; 
    background-color:white; 
    padding: 10px; 
    font-family:'Droid Sans', sans-serif; 
    font-size:.9em; 
    text-align: center; 
    color: transparent; 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .75)); 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .75); 
    box-shadow: 0 0 20px rgba(0, 0, 0, .75); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius:8px; 
} 
ul.enlarge2 li:hover { 
    z-index: 150; 
    cursor:pointer; 
} 
ul.enlarge2 span img { 
    padding:2px; 
    background:#ccc; 
} 
ul.enlarge2 li:hover span { 
    top: 100px; 
    /*the distance from the bottom of the thumbnail to the top of the popup image*/ 
    left: 0px; 
    /*distance from the left of the thumbnail to the left of the popup image*/ 
} 
ul.enlarge2 li:hover:nth-child(2) span { 
    left: -200px; 
} 
ul.enlarge2 li:hover:nth-child(3) span { 
    left: -200px; 
} 
ul.enlarge2 img, ul.enlarge span { 
    behavior: url(pie/PIE.htc); 
} 

Answer 1

вам нужно поместить текст внутри span1 и положить, что там в ul.enlarge2 span в новый тег в CSS для span1. таким образом вы можете легче манипулировать этим белым ящиком. также вам нужно display:block и margin:0 auto сделать span1, чтобы получить центрированный.

ul.enlarge2 span{ 
position:absolute; 
left: -9999px; 
background-color:white; 
} 

это все, что нужно в этом детали и все остальное идет в span1 теге.

здесь скрипка с другим изображением http://jsfiddle.net/JVQp7/

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

, если вы хотите, перед появлением изображения span1 перед этим. http://jsfiddle.net/JVQp7/1/