Эффект для изображения при наведении курсора

Question

посмотрите это:

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

Спасибо, ребята.

Answer 1

Вы можете достичь этого многими способами.В зависимости от структуры вашей страницы вы можете выполнить это с помощью нескольких классов CSS.

HTML:

<div class="image_hover"><span>Text</span></div>

CSS:

.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }

Вам потребуетсясделать некоторые обновления в зависимости от вашей конкретной ситуации.Вот рабочий пример на jsbin.Это решение по умолчанию скрывает текст, и когда пользователь наводит курсор на элемент div, класс: hover приведет к отображению текста.

Вы также можете использовать jQuery для добавления или отображения div onmouseover.1013 *

Answer 2

Да, вы можете легко использовать jquery для достижения этой цели.Если вы хотите изучить весь процесс и сделать это самостоятельно, взгляните на это - Скользящие рамки и подписи с jQuery Или посмотрите на несколько плагинов для достижения того же эффекта - 10Плагины с заголовками jQuery