すべてのアイコンが異なるサイズを持っているので、ホバー・ドスンがフィットします

Question

私はこの問題の解決策を探しています：私は垂直ナビゲーションを持っています。異なるIDでサイズを変更してください。今、私はそれらにホバー効果が必要です。しかし、アイコンのサイズが違うので、ホバリング・ドスケンが私のナビゲーション・ボーダーに合っていました。私は彼らがこのようにふるまうようにしたい：https://www.w3schools.com/w3css/tryw3css_templates_dark_portfolio.htm 誰かがこれで私を助けることができますか？

<nav class="hidden-mobile" id="menue"> 
    <div class="navItem"> 
    <img src="./img/home_website.png" class="icon" class="current" id="homeicon"><br> 
    <a class="icontitle" href="./fotowand.html">HOME</a> 
    <div class="after"></div> 
</div> 
    <div class="navItem"> 
    <img src="./img/studieninteressierte.png"class="icon"><br> 
    <a class="icontitle" href="">STUDIEN-<br>INTERESSIERTE</a> 
    <div class="after"></div> 
</div> 
    <div class="navItem"> 
    <img src="./img/studierende.png" class="icon" id="studierendeicon"><br> 
    <a class="icontitle" href="">STUDIERENDE</a> 
    <div class="after"></div> 
</div> 
<div class="navItem"> 
    <img src="./img/unternehmen.png" class="icon" id="unternehmenicon"><br> 
    <a class="icontitle" href="">UNTERNEHMEN</a> 
    <div class="after"></div> 
</div> 
    <div class="navItem"> 
    <img src="./img/kontakt.png" class="icon"><br> 
    <a class="icontitle" href="">KONTAKT</a> 
    <div class="after"></div> 
</div> 
</nav> 

この

は

.navItem { 
    text-align: center; 
    display: inline-block; 
    position: relative; 
    margin-right: 1em; 
    margin-bottom: 1em; 
} 

.icon { 
    width:80px; 
} 

.after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width:200px; 
    height: 100px; 
    display: none; 
    text-align: center; 

    color: white; 

} 

.navItem:hover .after { 
background-color: rgba(0, 0, 0, .6); 
display: block; 
left:0px; 
} 

Navigation Screenshot

Navigation Screenshot

Answer 1

<div class="navItem" id="studierendeicon"> 
    <a class="icontitle" href="" >STUDIERENDE</a> 
    <div class="after"></div> 
</div> 

#studierendeicon{ 
background-image: url('./img/studierende.png') 
background-position: center center; //change on needs 
} 
.navItem{ 
width: 80px; 
} 

はそれが

Answer 2

はこれを試してみてください動作するかどうか、私に教えてください私のCSSです：

1. afterクラスを指定した幅と高さを削除する必要があります。

2. :hoverをnavItemに直接指定することができます。

添付された作業コピー。

.navItem { 
 
    text-align: center; 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-right: 1em; 
 
    margin-bottom: 1em; 
 
} 
 

 
.icon { 
 
    width:80px; 
 
} 
 

 
.after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    
 
    display: none; 
 
    text-align: center; 
 

 
    color: white; 
 

 
} 
 

 

 
.navItem:hover { 
 
    background: rgba(0, 0, 0, .6); 
 
}

<nav class="hidden-mobile" id="menue"> 
 
    <div class="navItem"> 
 
    <img src="./img/home_website.png" class="icon" class="current" id="homeicon"><br> 
 
    <a class="icontitle" href="./fotowand.html">HOME</a> 
 
    <div class="after"></div> 
 
</div> 
 
    <div class="navItem"> 
 
    <img src="./img/studieninteressierte.png"class="icon"><br> 
 
    <a class="icontitle" href="">STUDIEN-<br>INTERESSIERTE</a> 
 
    <div class="after"></div> 
 
</div> 
 
    <div class="navItem"> 
 
    <img src="./img/studierende.png" class="icon" id="studierendeicon"><br> 
 
    <a class="icontitle" href="">STUDIERENDE</a> 
 
    <div class="after"></div> 
 
</div> 
 
<div class="navItem"> 
 
    <img src="./img/unternehmen.png" class="icon" id="unternehmenicon"><br> 
 
    <a class="icontitle" href="">UNTERNEHMEN</a> 
 
    <div class="after"></div> 
 
</div> 
 
    <div class="navItem"> 
 
    <img src="./img/kontakt.png" class="icon"><br> 
 
    <a class="icontitle" href="">KONTAKT</a> 
 
    <div class="after"></div> 
 
</div> 
 
</nav>

私は、これはあなたに役立つことを願っています。がんばろう！

Answer 3

ホバーにトランスフォームエフェクトを適用できます。

.navItem:hover{ 
    transform: scale(2); 
} 

.navItem { 
 
    text-align: center; 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-right: 1em; 
 
    margin-bottom: 1em; 
 
    transition: all 500ms ease; 
 
} 
 

 
.icon { 
 
    width:80px; 
 
} 
 

 
.after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    
 
    display: none; 
 
    text-align: center; 
 

 
    color: white; 
 

 
} 
 

 

 
.navItem:hover { 
 
    transform: scale(2); 
 
}

<nav class="hidden-mobile" id="menue"> 
 
    <div class="navItem"> 
 
    <img src="./img/home_website.png" class="icon" class="current" id="homeicon"><br> 
 
    <a class="icontitle" href="./fotowand.html">HOME</a> 
 
    <div class="after"></div> 
 
</div> 
 
    <div class="navItem"> 
 
    <img src="./img/studieninteressierte.png"class="icon"><br> 
 
    <a class="icontitle" href="">STUDIEN-<br>INTERESSIERTE</a> 
 
    <div class="after"></div> 
 
</div> 
 
    <div class="navItem"> 
 
    <img src="./img/studierende.png" class="icon" id="studierendeicon"><br> 
 
    <a class="icontitle" href="">STUDIERENDE</a> 
 
    <div class="after"></div> 
 
</div> 
 
<div class="navItem"> 
 
    <img src="./img/unternehmen.png" class="icon" id="unternehmenicon"><br> 
 
    <a class="icontitle" href="">UNTERNEHMEN</a> 
 
    <div class="after"></div> 
 
</div> 
 
    <div class="navItem"> 
 
    <img src="./img/kontakt.png" class="icon"><br> 
 
    <a class="icontitle" href="">KONTAKT</a> 
 
    <div class="after"></div> 
 
</div> 
 
</nav>