Sensible de la imagen de spots con efectos hover

Question 1

Tengo todo un reto aquí!

El diseñador de envió este luminosidad árbol que tiene algunos puntos de luz que en desplazar el puntero del mouse debe mostrar un menú con un enlace a una página en el sitio web. No sólo eso, en hover, una superposición debería ser activado cambiar el tono de todo el sitio (algún tipo de negro de superposición con opacidad reducida)

El problema que estoy enfrentando es que yo realmente no sé por dónde empezar ni siquiera esto! Pensé que la implementación de algún tipo de mapa de imagen, pero no sé como hacerlo sensible y es muy difícil para mí pensar en una solución para este reto de diseño.

Como se puede ver en las capturas de pantalla, la luz del árbol tiene que ser como fondo de la cabecera y las manchas deben colocarse sobre determinadas partes del árbol.

La ayuda será muy apreciada

Question 2

Esto podría ser un punto de partida para usted. Siempre y cuando usted sabe el tamaño de la imagen, que en su caso fue 914x913...sólo podría utilizar position: absolute; y los píxeles de izquierda, derecha, arriba, abajo, dependiendo de donde usted lo quiere...y es sólo una cuestión de la medición (un poco de ensayo y error demasiado). Ver fragmento de código...he creado dos 'puntos calientes' para ponerse en marcha (marcada en rojo). Y el cuadro que aparece al pasar el puntero del ratón está allí, usted puede jugar con el posicionamiento y, obviamente, el estilo que mejor que un simple cuadro. Por el camino, la <span></span> es necesaria para permitir que el "hotspot" para ser independiente de lo contrario, el brillo se hacer cosas raras con la imagen de fondo. Ah, y si usted planea tener presente apoyar a las pequeñas ventanas se le tiene que agregar consultas de medios para cada uno para ajustar la posición de cada punto de acceso.

<!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

Esto podría ser un punto de partida para usted. Siempre y cuando usted sabe el tamaño de la imagen, que en su caso fue 914x913...sólo podría utilizar position: absolute; y los píxeles de izquierda, derecha, arriba, abajo, dependiendo de donde usted lo quiere...y es sólo una cuestión de la medición (un poco de ensayo y error demasiado). Ver fragmento de código...he creado dos 'puntos calientes' para ponerse en marcha (marcada en rojo). Y el cuadro que aparece al pasar el puntero del ratón está allí, usted puede jugar con el posicionamiento y, obviamente, el estilo que mejor que un simple cuadro. Por el camino, la <span></span> es necesaria para permitir que el "hotspot" para ser independiente de lo contrario, el brillo se hacer cosas raras con la imagen de fondo. Ah, y si usted planea tener presente apoyar a las pequeñas ventanas se le tiene que agregar consultas de medios para cada uno para ajustar la posición de cada punto de acceso.

<!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>

Sensible de la imagen de spots con efectos hover

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría