Показать сообщение отдельно
  #6 (permalink)  
Старый 15.06.2020, 13:15
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
      font-size: .8rem;
      line-height: 160%;
    }

    h3 {
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-size: 1.8rem;
      line-height: 0%;
      color: #FCD7BB;
    }

    .main {
      max-width: 720px;
      margin: 60px auto 0px;
    }

    .blok {
      position: relative;
      max-width: 640px;
      display: grid;
      grid-template-columns: 240px minmax(120px, 400px);
      grid-template-rows: 60px 120px;
      grid-template-areas:
        "kartinka_blok zagolovok_blok"
        "kartinka_blok opisanie_blok";
      grid-gap: 0px 20px;
      cursor: pointer;
    }

    .kartinka_blok {
      grid-area: kartinka_blok;
    }

    .zagolovok_blok {
      grid-area: zagolovok_blok;
    }

    .opisanie_blok {
      grid-area: opisanie_blok;
    }

    .dalee_blok {
      grid-area: dalee_blok;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, .6);
      opacity: 0;
      transition: all .4s;
    }

    .dalee_tekst {
      display: block;
      text-align: center;
      color: #AC5959;
      text-decoration: underline;
      padding: 90px 0px 0px 0px;
      font-size: 2rem;
    }
  </style>
</head>

<body>
  <div class="blok">
    <div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
    <div class="zagolovok_blok">
      <h3>Полигональный арт</h3>
    </div>
    <div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
      которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
      себя во всей красе.</div>
    <div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
  </div>

  <div class="blok">
    <div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
    <div class="zagolovok_blok">
      <h3>Полигональный ар2т</h3>
    </div>
    <div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
      которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
      себя во всей красе.</div>
    <div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
  </div>
  <script>
    "use_strict"
    document.querySelectorAll(".blok").forEach(b => {
      b.addEventListener("mouseenter", function () {
        b.querySelector('.dalee_blok').style.opacity = 1
      })
      b.addEventListener("mouseleave", function () {
        b.querySelector('.dalee_blok').style.opacity = 0
      })
    });
  </script>
</body>

</html>


или без js
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
      font-size: .8rem;
      line-height: 160%;
    }

    h3 {
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-size: 1.8rem;
      line-height: 0%;
      color: #FCD7BB;
    }

    .main {
      max-width: 720px;
      margin: 60px auto 0px;
    }

    .blok {
      position: relative;
      max-width: 640px;
      display: grid;
      grid-template-columns: 240px minmax(120px, 400px);
      grid-template-rows: 60px 120px;
      grid-template-areas:
        "kartinka_blok zagolovok_blok"
        "kartinka_blok opisanie_blok";
      grid-gap: 0px 20px;
      cursor: pointer;
    }

    .kartinka_blok {
      grid-area: kartinka_blok;
    }

    .zagolovok_blok {
      grid-area: zagolovok_blok;
    }

    .opisanie_blok {
      grid-area: opisanie_blok;
    }

    .dalee_blok {
      grid-area: dalee_blok;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, .6);
      opacity: 0;
      transition: all .4s;
    }

    .dalee_tekst {
      display: block;
      text-align: center;
      color: #AC5959;
      text-decoration: underline;
      padding: 90px 0px 0px 0px;
      font-size: 2rem;
    }
    
    .dalee_blok {
      opacity: 0;
    }

    .blok:hover .dalee_blok {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="blok">
    <div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
    <div class="zagolovok_blok">
      <h3>Полигональный арт</h3>
    </div>
    <div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
      которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
      себя во всей красе.</div>
    <div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
  </div>

  <div class="blok">
    <div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
    <div class="zagolovok_blok">
      <h3>Полигональный ар2т</h3>
    </div>
    <div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
      которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
      себя во всей красе.</div>
    <div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
  </div>
  <script>
    "use_strict"
    // document.querySelectorAll(".blok").forEach(b => {
    //   b.addEventListener("mouseenter", function () {
    //     b.querySelector('.dalee_blok').style.opacity = 1
    //   })
    //   b.addEventListener("mouseleave", function () {
    //     b.querySelector('.dalee_blok').style.opacity = 0
    //   })
    // });
  </script>
</body>

</html>

Последний раз редактировалось SuperZen, 15.06.2020 в 13:17.
Ответить с цитированием