Задать вопрос
retrica
@retrica
Канцлер Германии
html

Как сделать что бы при наведении на картинку появлялось описание?

Вот на сайте есть 3 картинки, как сделать что бы например наавёл на 1 картинку появлялся небольшой блок с описанием, при наведении на другую другой блок и т.д.? заранее спасибо
  • Вопрос задан
  • 14054 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
nalomenko
@nalomenko
Руководитель отдела разработок в студии «Lava»
HTML:

<div class="container" >
    <img src="./images/image1.jpg" />
    <div class="description" >Your description 1</div>
</div>
<div class="container" >
    <img src="./images/image2.jpg" />
    <div class="description" >Your description 1</div>
</div>
<div class="container" >
    <img src="./images/image3.jpg" />
    <div class="description" >Your description 1</div>
</div>


CSS:

.container > .description { display:none; }
.container:hover > .description { display: block; }
Ответ написан
Комментировать
Комментировать
sergiks
@sergiks
♬♬
Идеи для вдохновения на CoDrops
Ответ написан
Комментировать
Комментировать
yespeace
@yespeace
Uncle Bob’s Nephew
jsfiddle.net/xkwppsyb
Ответ написан
Комментировать
Комментировать
reskwer
@reskwer
front-end developer
Ну как то так смотрите codepen.io/reskwer/pen/jEyWew
файл Index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="reskwer">
	<title>Что-то на CodePen</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="block">
		<div class="prewive">
		Какаето подсказка<br>И еще подсказка
		</div>
		<img src="http://placehold.it/150x200" alt="img">
	</div>
</body>
</html>


Второй файл CSS style.css 
.block{
	width: 150px;
	height: 200px;
	position: relative;
	border: 1px solid #000;
}
.block img{
	width: 100%;
	height: 100%;
}
.block .prewive{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 15% 3%;
	box-sizing: border-box;
}
.block:hover .prewive{
	display: block;
	background: rgba(255,255,255,.8);
	cursor: pointer;
}

создайте эти 2 файла, положите в 1 папку, и будет вам счастье, можно красивую анимацию сделать transition - но думаю это перебор уже.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Установить систему Linux
26 апр. 2024, в 17:24
2000 руб./в час
Перенести базу знаний в формат lms (На подобии Obsidium)
26 апр. 2024, в 17:02
35000 руб./за проект
Составить единую таблицу SQL
26 апр. 2024, в 16:51
2000 руб./в час
Ещё заказы