Адаптивные пятна изображения с эффектами наведения

Question 1

У меня здесь довольно сложная задача!

Дизайнер прислал это лигатурное дерево, в котором есть несколько светлых пятен, которые при наведении мыши должны отображать ссылку меню на страницу веб-сайта. Мало того, что при наведении курсора будет активировано наложение, изменяющее оттенок всего сайта (своего рода черное наложение с уменьшенной непрозрачностью).

Проблема, с которой я сталкиваюсь, заключается в том, что я действительно не знаю, с чего даже начать это! Я думал реализовать какую-то карту изображений, но потом я не знаю, как ее адаптировать, и мне действительно трудно придумать решение для этой задачи проектирования.

Как вы можете видеть на скриншотах, светлое дерево должно быть фоном заголовка, а пятна должны располагаться над некоторыми определенными частями дерева.

Помощь будет очень признательна

Question 2

Это может стать для вас отправной точкой. Пока вы знаете размер своего изображения, который в вашем случае был 914x913...вы могли бы просто использовать position: absolute; и пиксели слева, справа, сверху, снизу в зависимости от того, где вы этого хотите...и это просто вопрос измерения (тоже немного проб и ошибок). См. Фрагмент кода...Я создал две "горячие точки" для вас, чтобы вы могли начать (выделены красным цветом). И коробка, которая появляется при опрокидывании, есть, вы можете играть с позиционированием и, очевидно, стилизовать ее лучше, чем обычную коробку. Кстати, <span></span> это необходимо только для того, чтобы "горячая точка" была отдельной, иначе свечение будет делать странные вещи с вашим фоновым изображением. О, и если вы планируете использовать эту поддержку меньших видовых экранов, вам придется добавлять медиа-запросы для каждого, чтобы настроить положение каждой точки доступа.

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <title>Test</title>

  <style>
    body {
      font-family: sans-serif;
      color: white;
    }

    .container {
      background-image: url('https://i.stack.imgur.com/lzxlC.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      width: 914px;
      height: 913px;
      margin: 0 auto;
      position: relative;

    }


    /* SPOT 1  */
    .spot-1 {
      position: absolute;
      left: 323px;
      top: 148px;
    }

    .spot-1 span {
      border: 3px solid #FF6F6F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-1:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-1 {
      display: none;
    }

    .spot-1:hover .box-1 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }




    /* SPOT 2  */
    .spot-2 {
      position: absolute;
      left: 515px;
      top: 163px;
    }

    .spot-2 span {
      border: 3px solid #FF3F3F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-2:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-2 {
      display: none;
    }

    .spot-2:hover .box-2 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="spot-1"><span></span>
      <div class="box-1">HOWDY!</div>
    </div>

    <div class="spot-2"><span></span>
      <div class="box-2">HI</div>
    </div>

  </div>

</body>

</html>

Authentic Science · Answer 1 · 2021-11-24T00:41:23

Это может стать для вас отправной точкой. Пока вы знаете размер своего изображения, который в вашем случае был 914x913...вы могли бы просто использовать position: absolute; и пиксели слева, справа, сверху, снизу в зависимости от того, где вы этого хотите...и это просто вопрос измерения (тоже немного проб и ошибок). См. Фрагмент кода...Я создал две "горячие точки" для вас, чтобы вы могли начать (выделены красным цветом). И коробка, которая появляется при опрокидывании, есть, вы можете играть с позиционированием и, очевидно, стилизовать ее лучше, чем обычную коробку. Кстати, <span></span> это необходимо только для того, чтобы "горячая точка" была отдельной, иначе свечение будет делать странные вещи с вашим фоновым изображением. О, и если вы планируете использовать эту поддержку меньших видовых экранов, вам придется добавлять медиа-запросы для каждого, чтобы настроить положение каждой точки доступа.

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <title>Test</title>

  <style>
    body {
      font-family: sans-serif;
      color: white;
    }

    .container {
      background-image: url('https://i.stack.imgur.com/lzxlC.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      width: 914px;
      height: 913px;
      margin: 0 auto;
      position: relative;

    }


    /* SPOT 1  */
    .spot-1 {
      position: absolute;
      left: 323px;
      top: 148px;
    }

    .spot-1 span {
      border: 3px solid #FF6F6F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-1:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-1 {
      display: none;
    }

    .spot-1:hover .box-1 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }




    /* SPOT 2  */
    .spot-2 {
      position: absolute;
      left: 515px;
      top: 163px;
    }

    .spot-2 span {
      border: 3px solid #FF3F3F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-2:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-2 {
      display: none;
    }

    .spot-2:hover .box-2 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="spot-1"><span></span>
      <div class="box-1">HOWDY!</div>
    </div>

    <div class="spot-2"><span></span>
      <div class="box-2">HI</div>
    </div>

  </div>

</body>

</html>

Адаптивные пятна изображения с эффектами наведения

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории