<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/style.css">
<title>Home Work №5 Студенков Анатолій</title>
</head>
<body>
<div class="background"></div>
<center>
<div class="content">
<div class="destination">
<h1>our destination</h1>
<h3>choose your next destination</h3>
</div>
<div class="Line_1">
<div class="card_1">
<img class="content_1" src="./img/image 1 (7).png" alt="1">
<img class="content_2" src="./img/image 2.png" alt="2">
<img class="content_3" src="./img/image 3.png" alt="3">
</div>
<br>
<div class="Line_2">
<img class="content_4" src="/img/image 4.png" alt="4">
<img class="content_5" src="./img/image 5.png" alt="5">
<img class="content_6" src="./img/image 6.png" alt="6">
</div>
</div>
</center>
</body>
</html>
body{
background-color: rgb(196, 191, 193);
}
.content{
background-color: white;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.destimation{
padding-left: 10px;
color: #020953;
text-transform: capitalize;
}
h1{
font-family: 'Josefin Sans';
font-size: 40px;
font-weight: 600;
}
h3{
font-family: 'Roboto';
font-size: 15px;
}
.line_1 .line_2{
display: inline-block;
margin: 0 auto;
}
.center{
margin: auto;
}
.line_1, .line_2{
position:relative;
width:300px;
height:400px;
}
</pre>
1 ответ
Ну, если уж совсем извращаться, так можно сделать примерно так (я не вычищал уже нюансы, сама идея - попробуйте увести курсор с первой картинки на вторую и обратно)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Work №5 Студенков Анатолій</title>
<style>
body{
background-color: rgb(196, 191, 193);
}
.content{
background-color: white;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.destimation{
padding-left: 10px;
color: #020953;
text-transform: capitalize;
}
h1{
font-family: 'Josefin Sans';
font-size: 40px;
font-weight: 600;
}
h3{
font-family: 'Roboto';
font-size: 15px;
}
.line_1 .line_2{
display: inline-block;
margin: 0 auto;
}
.center{
margin: auto;
}
.line_1, .line_2{
position:relative;
width:300px;
height:400px;
}
#card_1_1 {
--text-visible: hidden;
}
#card_1_1:hover {
--text-visible: visible;
}
#card_1_1 #textimg_1 {
visibility: var(--text-visible);
}
</style>
</head>
<body>
<div class="background"></div>
<center>
<div class="content">
<div class="destination">
<h1>our destination</h1>
<h3>choose your next destination</h3>
</div>
<div class="Line_1">
<div class="card_1">
<div id="card_1_1" style="position: relative">
<img id="img_1" class="content_1" src="https://avatarko.ru/img/kartinka/33/multfilm_lyagushka_32117.jpg" alt="1">
<div id="textimg_1" style="position:absolute; bottom: 50%; left: 50%; z-index: 100;"><h1>100$</h1></div>
</div>
<div id="card_1_2" style="position: relative">
<img class="content_2" src="https://kartinkin.net/uploads/posts/2022-03/thumbs/1648037518_37-kartinkin-net-p-krasivie-kartinki-na-vaiber-49.jpg" alt="2">
</div>
<img id="card_1_3" class="content_3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS28FZFtMvSKapZFq-7hKfiQ7IIa_Z67XJv1zUS6caRFjMbhe8S_F24xEZP6PWwx0PRMC4&usqp=CAU" alt="3">
</div>
<br>
<div class="Line_2">
<img class="content_4" src="https://www.ixbt.com/img/r30/00/02/16/70/IMG3249.jpg" alt="4">
<img class="content_5" src="https://us.123rf.com/450wm/krisdog/krisdog2005/krisdog200500053/146854659-cell-mobile-phone-mascot-cartoon-character.jpg?ver=6" alt="5">
<img class="content_6" src="https://us.123rf.com/450wm/krisdog/krisdog1812/krisdog181200047/121753327-a-cell-or-mobile-phone-christmas-mascot-cartoon-character-with-a-santa-claus-hat-on-giving-a-double-.jpg?ver=6" alt="6">
</div>
</div>
</center>
</body>
<center>
уже давно не приветствуется - не нужно копипастить всё подряд. Во-вторых, пробелы в путях к файлам - плохая практика. В-третьих, где и какой текст должен появляться?