retrica
@retrica
Канцлер Германии

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

Вот на сайте есть 3 картинки, как сделать что бы например наавёл на 1 картинку появлялся небольшой блок с описанием, при наведении на другую другой блок и т.д.? заранее спасибо
  • Вопрос задан
  • 14262 просмотра
Пригласить эксперта
Ответы на вопрос 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; }
Ответ написан
Комментировать
Идеи для вдохновения на CoDrops
Ответ написан
Комментировать
yespeace
@yespeace
Uncle Bob’s Nephew
Ответ написан
Комментировать
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 - но думаю это перебор уже.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы