0
У меня проблема с предварительным просмотром изображений в моем CSS (или jQuery?).Предварительный просмотр изображения
Пожалуйста, посмотрите на правом примере странице в верхних и моей испорченной странице в нижней части: 
На самом деле я хочу, чтобы мое предварительный просмотр окна в окне браузера, но теперь это пересечение через край.
PS: Я не использовал коды jQuery, поле предварительного просмотра - CSS.
Что мне теперь делать? Должен ли я решить проблему с помощью jQuery?
Это - весь мой код. Я захватил всю предпросмотра коробку из этого урока:
CSS3 Demos - Image popup
HTML
<ul class="enlarge">
<li><img src="assets/image-enlarge01-sml.jpg" width="150px" height="100px" alt="Dechairs" /><span><img src="assets/image-enlarge01.jpg" alt="Deckchairs" /><br />Deckchairs on Blackpool beach</span></li>
<li><img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="Blackpool sunset" /><span><img src="assets/image-enlarge02.jpg" alt="Blackpool sunset" /><br />Sunset over the Irish Sea at Blackpool</span></li>
<li><img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="Blackpool pier" /><span><img src="assets/image-enlarge03.jpg" alt="Blackpool pier" /><br />Rolling waves off Blackpool North Pier</span></li>
</ul>
CSS
ul.enlarge {
list - style - type: none; /*remove the bullet point*/
margin - left: 0;
}
ul.enlarge 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: 10 px 40 px 0 20 px;
}
ul.enlarge img {
background - color: #eae9d4;
padding: 6 px; - webkit - box - shadow: 0 0 6 px rgba(132, 132, 132, .75); - moz - box - shadow: 0 0 6 px rgba(132, 132, 132, .75);
box - shadow: 0 0 6 px rgba(132, 132, 132, .75); - webkit - border - radius: 4 px; - moz - border - radius: 4 px;
border - radius: 4 px;
}
ul.enlarge span {
position: absolute;
left: -9999 px;
background - color: #eae9d4;
padding: 10 px;
font - family: 'Droid Sans',
sans - serif;
font - size: .9e m;
text - align: center;
color: #495a62;
-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.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:# ccc;
}
ul.enlarge li: hover span {
top: -300 px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20 px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li: hover: nth - child(2) span {
left: -100 px;
}
ul.enlarge li: hover: nth - child(3) span {
left: -200 px;
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span {
behavior: url(pie/PIE.htc);
}
Пожалуйста, попробуйте разместить свой код, в противном случае это будет трудно, чтобы помочь вам. –
«Что мне теперь делать?» - показать нам свой CSS :) –
@TheOneandOnlyChemistryBlob HaHaHaHa ... lols .... Да, нам нужно увидеть ваш css .... –