Css Transition - Evitare che si sposti tutto al passaggio del mouse

di
alext
il
2 risposte
alext
alext
Pochi posts
Iscritto da
ago, 2020
Messaggi:
9

Css Transition - Evitare che si sposti tutto al passaggio del mouse

Ciao!

Ho una "semplice" domanda da porvi.

Come faccio ad evitare che, avendo una serie di icone, al passaggio del mouse si verifichi la transizione solo per l'icona sulla quale il mouse è passato, facendo si però che il resto delle icone non si muova?

Ecco i codici:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Tab</title>
    <link href="css/startpage.css" type="text/css" rel="stylesheet">
      
</head>
<body>

    <nav class="navicons">
            <div class="icon-container"><a href="https://mail.google.com/"><img class="icons" src="icons/gmail2.svg" /></a></div>
            <div class="icon-container"><a href="https://www.youtube.com/"><img class="icons" src="icons/youtube2.svg" /></a></div>
            <div class="icon-container"><a href="https://twitter.com"><img class="icons" src="icons/twitter2.svg" /></a></div>
            <div class="icon-container"><a href="https://www.reddit.com/"><img class="icons" src="icons/reddit2.svg" /></a></div>
            <div class="icon-container"><a href="https://www.twitch.tv/"><img class="icons" src="icons/twitch2.svg" /></a></div>
            <div class="icon-container"><a href="https://www.feedly.com/"><img class="icons" src="icons/feedly2.svg" /></a></div>
    </nav>
    
    <div id="googlesearch">
        <form action="http://www.google.com/search" method="get">
            <input type="text" name="q"/ placeholder=" Google It!" id="googleinput">
            <input type="image" src="icons/search.svg" id="googlebtn" />
        </form>
    </div>
    <div id="duckduckgosearch">
        <form action="https://duckduckgo.com/" method="get">
            <input type="text" name="q"/ placeholder=" DuckDuckGo It!" id="duckduckgoinput">
            <input type="image" src="icons/search.svg" id="duckduckgobtn" />
        </form>
    </div>
</body>
</html>
CSS

/* body */

body {
    background-color:#393D3F;
}

/* icons - icons transitions */

.icons {
    width: 25px;
    height: 25px;
    transition: 0.3s;
    opacity: 0.6;
    display: inline-block;
    position: relative;

}

.icons:hover {
    width: 35px;
    height: 35px;
    opacity: 1;
}

/* icons navbar */

.navicons {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -750px;
    margin-top: -60px;
    width: 1500px;
    height: 120px;
    padding: 5px 5px 5px 5px;
    text-align: center;
}

.icon-container {
    height: 25px;
    width: 25px;
    display: inline-block;
    position: relative;
    margin: 60px;
}
Come vedete, al passaggio del mouse su un'icona, tutte le altre si spostano di conseguenza in basso, ma io le vorrei fisse li, ferme.
Grazie anticipatamente.

2 Risposte

  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Css Transition - Evitare che si sposti tutto al passaggio del mouse

    Prova in questo modo: 
    
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>New Tab</title>
   <link href="css/startpage.css" type="text/css" rel="stylesheet">

   <style type="text/css">
      html,
      body {
         margin: 0;
         padding: 0;
         background-color: #393D3F;
      }

      #searchengine {
         position: absolute;
         top: 10px;
         left: 10px;
      }

      .box-container {
         display: flex;
         width: 100%;
         height: 100vh;
         justify-content: center;
         align-items: center;
      }

      /* icons - icons transitions */
      .icons {
         width: 25px;
         height: 25px;
         transition: 0.3s;
         opacity: 0.6;
      }

      .icons:hover {
         transform: scale(1.5);
         opacity: 1;
      }

      /* icons navbar */
      .navicons {
         display: flex;
      }

      .icon-container {
         margin: 60px;
      }

      @media only screen and (max-width: 800px) {
         .navicons {
            display: block;
         }
      }
   </style>

</head>

<body>

   <div class="box-container">
      <nav class="navicons">
         <div class="icon-container">
            <a href="https://mail.google.com/">
               <img class="icons" src="icons/gmail2.svg">
            </a>
         </div>
         <div class="icon-container">
            <a href="https://www.youtube.com/">
               <img class="icons" src="icons/youtube2.svg">
            </a>
         </div>
         <div class="icon-container">
            <a href="https://twitter.com">
               <img class="icons" src="icons/twitter2.svg">
            </a>
         </div>
         <div class="icon-container">
            <a href="https://www.reddit.com/">
               <img class="icons" src="icons/reddit2.svg">
            </a>
         </div>
         <div class="icon-container">
            <a href="https://www.twitch.tv/">
               <img class="icons" src="icons/twitch2.svg">
            </a>
         </div>
         <div class="icon-container">
            <a href="https://www.feedly.com/">
               <img class="icons" src="icons/feedly2.svg">
            </a>
         </div>
      </nav>
   </div>

   <div id="searchengine">
      <div id="googlesearch">
         <form action="http://www.google.com/search" method="get">
            <input type="text" name="q"/ placeholder=" Google It!" id="googleinput">
            <input type="image" src="icons/search.svg" id="googlebtn" />
         </form>
      </div>
      <div id="duckduckgosearch">
         <form action="https://duckduckgo.com/" method="get">
            <input type="text" name="q"/ placeholder=" DuckDuckGo It!" id="duckduckgoinput">
            <input type="image" src="icons/search.svg" id="duckduckgobtn" />
         </form>
      </div>
   </div>
</body>

</html>
  • alext
    alext
    Pochi posts
    Iscritto da
    ago, 2020
    Messaggi:
    9

    Re: Css Transition - Evitare che si sposti tutto al passaggio del mouse

    Si.. Funziona..
    Ma probabilmente molte cose devo ancora studiarle dato che non so proprio cosa siano
    Comunque grazie, proverò ad approfondirle!
Devi accedere o registrarti per scrivere nel forum
2 risposte