Citlivý snímek skvrny s hover efekty

0

Otázka

Mám docela problém!

Návrhář poslal světelně stromu, které mají některé světlé skvrny, které na myš hover by se mělo zobrazit menu odkaz na stránku na webových stránkách. Nejen, že na hover, překrytí shuld být aktivován mění odstín z celé stránky (nějaký černý překrytí se sníženou opacity)

Problém jsem čelí, je, že opravdu nevím, kde vůbec začít! Myslel jsem, že prováděcí nějaký obrázek mapy, ale pak nevím, jak na to reagovat a je to opravdu těžké pro mě, že řešení pro tento design challenge.

Jak můžete vidět v screenshoty, světlo, strom má být jako pozadí záhlaví a skvrny by měly být umístěny přes některé konkrétní části stromu.

Pomoc bude velmi ocenil

enter image description here

enter image description here

css html responsive responsive-design
2021-11-23 23:31:58
1

Nejlepší odpověď

1

To by mohlo být výchozím bodem pro vás. Tak dlouho, jak víte, že vaše velikost obrazu, která ve vašem případě byla 914x913...jen by se hodila position: absolute; a pixelech od levé, pravé, horní, dolní podle toho, kde to chceš...a je to jen otázka měření (trochu pokusů a omylů). Viz fragment kódu jsem vytvořil dvě "hotspotů" pro vás, abyste mohli začít (uvedeno v červeném). A okno, které se zobrazí při převrácení je tam, můžete hrát s umístěním a samozřejmě styl je lepší, než obyčejný rámeček. Mimochodem, <span></span> je potřeba jen umožnit "hotspot" být oddělené, jinak záře bude dělat divné věci s váš obrázek na pozadí. Jo a pokud máte v plánu, aby tato podpora menší výřezy budete muset přidat média dotazy, pro každou nastavit polohu každého 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>

2021-11-24 00:41:23

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................