Масштабирование заголовка вместе с картинкой

Question

Не могу понять как прикрепить заголовок title к картинке img , чтобы заголовок масштабировался вместе с картинкой.

*{
    padding: 0;
    margin: 0;
    border: 0;
}
*,*:before,*:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
body{
    background-color: black;
}

.container {
    display: flex;
    width: 100%;
    max-width: 1400px;
  margin: 0 auto;
    align-items: center;
    justify-content: center;

 }

.header {
  min-width: 600px;
    width: 100%;
    top: 50%;
  position: absolute;
}

.img{
        width: 100%;


    }
    .title {
        display: block;
      font-size: 50px;
        text-decoration: underline;
        color: white;

   }
.header__nav {
 display: flex;
 width: 100%;
 justify-content: space-around;
 background-color: black;
 flex-wrap: nowrap;
  }

.nav__link{
        padding: 20px;
        color: #7443cb;
    margin: 60px;
        padding: 0 20px 0 20px;
        opacity: 0.8;
        font-size: 18px;
        transition: font-size .2s linear;
        flex-wrap: nowrap;
 }

 .nav__link:hover {
     opacity: 1;
     font-size: 23px;
 }

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>ANIMARS.RU</title>
        <!-- Подключаем CSS -->
        <link rel="stylesheet" href="styles.css" />
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    </head>
    <!-- Отображаемое тело страницы -->
    <body>
    <!-- Верхушка -->
     <header class="header">
        <div class="container">
                <h1 class="title">ANIMARS</h1>

    </div>
     </header>
     <!-- картинка марса -->
<div class="img">
<img class="img" src="pictures/mars.jpg">
</div>


     <!-- навигация -->
    <nav class="header__nav">
        <a href="#" class="nav__link">Профиль</a>
        <a href="#" class="nav__link">Мои списки</a>
        <a href="#" class="nav__link">Сообщество</a>
        <a href="#" class="nav__link">О нас</a>
 </nav>
    </body>
</html>

Answer 1

Один из вариантов реализации:

* { padding: 0; margin: 0; border: 0; }

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus, :active { outline: none; }

a:focus, a:active { outline: none; }

nav, footer, header, aside { display: block; }

html, body {
  height: 100%; width: 100%;
  line-height: 1; font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea { font-family: inherit; }

input::-ms-clear { display: none; }

button { cursor: pointer; }

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a, a:visited { text-decoration: none; }

a:hover { text-decoration: none; }

ul li { list-style: none; }

img { vertical-align: top; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit; font-weight: 400;
}

body { background-color: black; }

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1400px; width: 100%;
  margin: 0 auto;
}

.header {
  position: absolute;
  z-index: 1; top: 50%;
  min-width: 600px; width: 100%;
  pointer-events: none;
}

.img {
  width: 100%; transition: transform 2s ease-in-out;
}
.header:hover + .img { transform: scale(2); }

.title {
  display: block;
  font-size: 50px;
  text-decoration: underline;
  color: white;
  pointer-events: auto;
}

.header__nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
  background-color: black;
}

.nav__link {
  flex-wrap: nowrap;
  margin: 60px; padding: 0 20px 0 20px;
  font-size: 18px;
  opacity: 0.8; color: #7443cb;
  transition: transform .2s linear;
}

.nav__link:hover {
  opacity: 1; transform: scale(1.3);
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <title>ANIMARS.RU</title>
  <!-- Подключаем CSS -->
  <link rel="stylesheet" href="styles.css" />
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<!-- Отображаемое тело страницы -->

<body>
  <!-- Верхушка -->
  <header class="header">
    <div class="container">
      <h1 class="title">ANIMARS</h1>
    </div>
  </header>
  <!-- картинка марса -->
  <div class="img">
    <img class="img" src="https://cdn.shazoo.ru/390491_1JTuxOV3Lp_mars.jpg">
  </div>
  <!-- навигация -->
  <nav class="header__nav">
    <a href="#" class="nav__link">Профиль</a>
    <a href="#" class="nav__link">Мои списки</a>
    <a href="#" class="nav__link">Сообщество</a>
    <a href="#" class="nav__link">О нас</a>
  </nav>
</body>

</html>

БЛОГ НА HUSL

Масштабирование заголовка вместе с картинкой

Ответы (1 шт):