マージンを持たないホバリングサイズのCSS

Question

現在マウスオーバーでナビゲーションバーの要素を大きくしようとしています。しかし、マウスオーバーするとウェブサイトの残りの部分が少し動いているので、ひどいです。 ウェブサイトの他の要素に影響を与えずにナビゲーションバーのテキストを大きくする方法はありますか？

nav { 
 
    text-align:center; 
 
    margin-top: 20px; 
 
    margin-bottom: -4px; 
 
} 
 

 
.nav{ 
 
    text-decoration: none; 
 
    color: black; 
 
    text-transform:uppercase; 
 
    font-weight: 600; 
 
    padding: 5px; 
 
    font-family: calibri; 
 
    padding-top: 2px; 
 
    transition-property: all; 
 
    transition-duration: 500ms; 
 
} 
 

 
.nav:hover { 
 
    font-size: 130%; 
 
    opacity: 0.6;  
 
} 
 

 
.LLHashtag { 
 
    width: 370px; 
 
    margin: 0 Auto; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin-top: 5px; 
 
    font-size: 50px; 
 
    text-transform:uppercase; 
 
    font-weight: 600; 
 
    color: black; 
 
    border-top: solid black 2px; 
 
    font-family: "helvetica Neue"; 
 
    font-weight: 400; 
 
}

<nav> 
 
    <a class="nav" href="http://www.google.de">Home</a> 
 
    <a class="nav" href="http://www.google.de">Über</a> 
 
    <a class="nav" href="http://www.google.de">Motivation</a> 
 
    <a class="nav" href="http://www.google.de">Kontakt</a> 
 
    <a class="nav" href="http://www.google.de">Impressum</a> 
 
    </nav> 
 
    <h1 class="LLHashtag">#LifeLetics</h1>

Answer 1

はい、あなたのナビゲーションバーたとえば、上のテキストの変換CSSを使用することができますtransform: scale(1.2)

.element:hover{ 
    transform: scale(1.2); 
} 

このページ
上の他のコンテンツには影響しませんまた、あなたは、ヘッダーにこのルールを適用するdisplay: inline-block;が必要になりますあなたが使用しようとすることができ

nav { 
 
    text-align: center; 
 
    margin-top: 20px; 
 
    margin-bottom: -4px; 
 
} 
 
.nav { 
 
    text-decoration: none; 
 
    color: black; 
 
    text-transform: uppercase; 
 
    font-weight: 600; 
 
    padding: 5px; 
 
    font-family: calibri; 
 
    padding-top: 2px; 
 
    transition-property: transform; 
 
    transition-duration: 500ms; 
 
    display: inline-block; 
 
} 
 
.nav:hover { 
 
    opacity: 0.6; 
 
    transform: scale(1.2); 
 
    backface-visibility: hidden; 
 
} 
 
.LLHashtag { 
 
    width: 370px; 
 
    margin: 0 Auto; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin-top: 5px; 
 
    font-size: 50px; 
 
    text-transform: uppercase; 
 
    font-weight: 600; 
 
    color: black; 
 
    border-top: solid black 2px; 
 
    font-family: "helvetica Neue"; 
 
    font-weight: 400; 
 
}

<nav> 
 
    <a class="nav" href="http://www.google.de">Home</a> 
 
    <a class="nav" href="http://www.google.de">Über</a> 
 
    <a class="nav" href="http://www.google.de">Motivation</a> 
 
    <a class="nav" href="http://www.google.de">Kontakt</a> 
 
    <a class="nav" href="http://www.google.de">Impressum</a> 
 
</nav> 
 
<h1 class="LLHashtag">#LifeLetics</h1>

Answer 2

リンクtransform: scale(1.2) 。 1.2を希望の縮尺で変更することを忘れないでください。