Создание наведенного изображения для выравнивания центра

Я использую следующий код css для своего html-файла, Изображение, которое появляется при наведении, находится в верхнем левом углу, как я могу сделать его центрированным?Создание наведенного изображения для выравнивания центра

Вот HTML код

<a class="thumbnail" href="#thumb">View Sample 
    <span> 
    <img src="images/1.png" /><br>Simply beautiful. 
    </span> 
</a>

Вот это Css код

.gallerycontainer{ 
position: relative; 
/*Add a height attribute and set to largest image's height to prevent overlaying*/ 
} 

.thumbnail img{ 

} 

.thumbnail:hover{ 
background-color: transparent; 
} 

.thumbnail:hover img{ 

} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: absolute; 
background-color: #F0F0F0 ; 
border-radius: 20px; 
padding: 0px; 


visibility: hidden; 
color: black; 
text-decoration: none; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 10; 

padding: 2px; 
} 

.thumbnail:hover span{ /*CSS for enlarged image*/ 
visibility: visible; 
top: 0; 
left: 230px; /*position where enlarged image should offset horizontally */ 
z-index: 50; 
}

источник

2014-02-13 Sulthan Allaudeen

заведите jsfiddle –

Вот является jsfiddle http://jsfiddle.net/93863/ –

Вы хотите, чтобы изображение отображалось точно в середине экрана даже при изменении размера? –

Посмотрите на мою jsfiddle здесь: http://jsfiddle.net/93863/7/

CSS, я добавил: -

.thumbnail:hover span 
{ 
    display: block; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -194px; /* Half of the popups height */ 
    margin-left: -190px; /* Half of the popups width */ 
}

источник

2014-02-13 16:02:41 Ben

http://jsfiddle.net/Sulthan/93863/12/ Works, (Изображение было сосредоточено, когда оно зависало в любом месте страницы.) –

:) Рад, что вы нашли решение – Ben

Изменения в top: 50%;

Fiddle

.thumbnail:hover span{ /*CSS for enlarged image*/ 
    visibility: visible; 
    top: 50%; 
    left: 230px; /*position where enlarged image should offset horizontally */ 
    z-index: 50; 
}

источник

2014-02-13 11:08:03 JunM

Но я хочу, чтобы изображение отображалось по центру, где бы я ни использовалось, чтобы навести на него курсор , –

.thumbnail:hover span{ 
visibility: visible; 
top: 50%; 
margin-top:-25%; 
left: 230px; 
z-index: 50; 
}

включают «верх: 50%» и «margin-top: -25%», это будет позиционировать его централизованно.

источник

2014-02-13 11:12:18

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

Я не вижу, как это работает. Какова цель отображения изображения при наведении ссылки? Это предварительный просмотр изображения? –

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

Создание наведенного изображения для выравнивания центра

ответ

Смежные вопросы