Reattivo punti di immagine con effetti al passaggio del mouse

Question 1

Ho una sfida da qui!

Designer inviato questa luce albero, in alcuni punti luce che al passaggio del mouse dovrebbe visualizzare un menu di link a una pagina del sito web. Non solo che, al passaggio del mouse, una sovrapposizione shuld essere attivato cambiare la tinta di tutto il sito (una sorta di black sovrapposizione con ridotta opacità)

Il problema che sto affrontando è che non so davvero da dove iniziare, anche questo! Ho pensato che l'attuazione di alcune specie di mappa immagine, ma poi non so come impostarlo reattivo ed è davvero difficile per me pensare una soluzione per questa sfida di design.

Come potete vedere negli screenshot, la luce dell'albero deve essere come sfondo dell'intestazione e le macchie dovrebbero essere posizionato al di sopra di alcune parti specifiche dell'albero.

L'aiuto sarà molto apprezzato

Question 2

Questo potrebbe essere un punto di partenza per voi. Se si conosce la dimensione dell'immagine, che nel tuo caso è stato 914x913...si potrebbe utilizzare position: absolute; e pixel da sinistra, destra, in alto, in basso a seconda di dove si vuole...ed è solo una questione di misura (un po ' di prova e di errore di troppo). Vedere frammento di codice...ho creato due "hotspot" per iniziare (evidenziato in rosso). E il dialogo che viene visualizzata quando si rollover c'è, si può giocare con il posizionamento e, ovviamente, lo stile è di meglio di una normale casella. A proposito, il <span></span> è necessario, solo per consentire la 'hotspot' essere separato in caso contrario il bagliore fare cose strane con la vostra immagine di sfondo. Oh, e se si prevede di avere questo supporto di piccole finestre si devono aggiungere le media query per ogni per regolare la posizione di ogni hotspot.

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

Questo potrebbe essere un punto di partenza per voi. Se si conosce la dimensione dell'immagine, che nel tuo caso è stato 914x913...si potrebbe utilizzare position: absolute; e pixel da sinistra, destra, in alto, in basso a seconda di dove si vuole...ed è solo una questione di misura (un po ' di prova e di errore di troppo). Vedere frammento di codice...ho creato due "hotspot" per iniziare (evidenziato in rosso). E il dialogo che viene visualizzata quando si rollover c'è, si può giocare con il posizionamento e, ovviamente, lo stile è di meglio di una normale casella. A proposito, il <span></span> è necessario, solo per consentire la 'hotspot' essere separato in caso contrario il bagliore fare cose strane con la vostra immagine di sfondo. Oh, e se si prevede di avere questo supporto di piccole finestre si devono aggiungere le media query per ogni per regolare la posizione di ogni hotspot.

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

Reattivo punti di immagine con effetti al passaggio del mouse

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria