Hallo,
ich bin ein ziemlicher Anfänger dennoch versuche ich für meine Webseite eine Bilderleiste als Menu zusammen zu stellen und soweit habe ich es schon. Ich versuche zusätzlich den (hover) so zu gestalten, dass ein Wort über das Bild/Menupunkt erscheint. Mit einzelnen Bilder kriege ich es hin aber , das doi Menuleiste als <ul><li> definiert ist, klappt es nicht und ich komme leider nicht weiter. Ich wäre für gute Tipps sehr dankbar:
/* Text über Navi */
.post{
/*margin: 80px 0 0 20px;*/
position: relative;
cursor: pointer;
}
.post:hover li .menu-text{
/*background-color: #fff;*/
width:152px;
}
.post img{
display: block;
}
.menu-text{
width: 0;
height: 50px;
background-color: rgba(100,100,100,0.7);
position: absolute;
top:0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/*border: solid;*/
transition: 0.7s ease;
}
.menu-text h2{
color: white;
font-size: 20px;
/* border: 6px solid white; */
padding:10px 30px;
}
/* */
<body>
<div class="hauptContainer">
<div class="box header"><img src="logo.jpg"></div>
<div class="box menu">
<div class="post">
<ul>
<li class="navi"><div class="menu-text"><h2>Panorama</h2></div> <a href="#"><img src="btn/1.jpg" title="" target=""></a></li>
<li class="navi"><div class="menu-text"><h2>X</h2></div><a href="#"><img src="btn/2.jpg" title="" target=""></a></li>
<li class="navi"><div class="menu-text"><h2>Y</h2></div><a href="#"><img src="btn/3.jpg" title="" target=""></a></li>
<li class="navi"><div class="menu-text"><h2>Z</h2></div><a href="#"><img src="btn/4.jpg" title="" target=""></a></li>
<li class="navi"><a href="#"><img src="btn/5.jpg" title="" target=""></a></li>
<li class="navi"><a href="#"><img src="btn/6.jpg" title="" target=""></a></li>
<li class="navi"><a href="#"><img src="btn/7.jpg" title="" target=""></a></li>
<li class="navi"><a href="#"><img src="btn/8.jpg" title="" target=""></a></li>
</ul>
</div>
</div>
<div class="box container">
<div class="box item">Lorem, ipsum dolor sit amet consectetur adipisicing </div>
<div class="box item">Lorem, ipsum dolor sit amet consectetur adipisicing.</div>
</div>
<div class="box footer">
<ul>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">AGB</a></li>
<li><a href="#">Versand</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</body>