Я новичок в html и css, поэтому прошу прощения за вопрос, но как вы управляете более чем одним элементом в html? это кажется таким сложным. Я пытаюсь получить изображение и эффект наведения, чтобы текст был под этим эффектом, а затем под ним была галерея, и все было отцентрировано. Пожалуйста, предложите мне способы сделать это. Я включу код, который я написал ниже, и это для django веб-сайта, поэтому некоторое содержимое может отличаться от фактического html / css.
html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hey</title>
<link rel="stylesheet" href="{% static "portofolio/css/cc.css" %}">
</head>
<body>
<div class="card">
<img src="{% static 'portofolio/img/save.png' %}" alt="Card Back">
<img src="{% static 'portofolio/img/try.png' %}" class="img-top" alt="Card Front">
</div>
<div class="text">
<h1>Hello. This is me</h1>
</div>
</body>
</html>
css:
body{
background-color: black;
}
.card {
position: relative;
display: inline-block;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
}
.card:hover .img-top {
display: inline;
}
.text{
color: white;
font-family: 'TYPOGRAPH PRO',sans-serif;
margin-left: 500px;
margin-bottom: 500px;
}