I’m trying to create several albums on my site but keeps appearing only the first created

Asked

Viewed 59 times

1

Follow down my code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
.lbox {
    visibility: hidden;
    opacity: 0;
}
ul {
    width: 800px auto ;
    list-style: none;
    display: flex;
    margin: 100px auto;
}
.min {
    width: 150px;
    padding: 10px;
}
.lbox:target {
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    background-color: rgba(10,10,10,0.7);
}
.box-img {
    width: 1000px;
    margin: 150px auto;
}
.btn {
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 40px;
    text-align: center;
}
#prev {
    left: 5%;
    top: 45%;
}
#next {
    right: 5%;
    top: 45%;
}
#close {
    top: 0;
    right: 2px;
}
.box-img img {
    opacity: 0;
}

.lbox:target .box-img img {
    opacity: 1;
    transition: opacity 250ms linear;    

}
<h2>Quarto 1<h2>
<ul>
    <li><a href="#img1"><img src="3cama.html" alt="" class="min"></a></li>
    <li><a href="#img2"><img src="quartdo.html" alt="" class="min"></a></li>
    <li><a href="#img3"><img src="quartoun.html" alt="" class="min"></a></li>
    <li><a href="#img4"><img src="quartsou.html" alt="" class="min"></a></li>
  <li><a href="#img5"><img src="quartuno.html" alt="" class="min"></a></li>
  <li><a href="#img6"><img src="quarto.html" alt="" class="min"></a></li>
  <li><a href="#img7"><img src="quartum.html" alt="" class="media"></a></li>
  <li><a href="#img8"><img src="varan.html" alt="" class="min"></a></li>
</ul>
   <div class="lbox" id="img1">
    <div class="box-img">
        <a href="#img8" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="3cama.html" alt="">
        <a href="#img2" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img2">
    <div class="box-img">
        <a href="#img1" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quartdo.html" alt="">
        <a href="#img3" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img3">
    <div class="box-img">
        <a href="#img2" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quartoun.html" alt="">
        <a href="#img4" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img4">
    <div class="box-img">
        <a href="#img3" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quartsou.html" alt="">
           <a href="#img5" class="btn" id="next">&#187;</a>
    </div>
  <div class="lbox" id="img5">
    <div class="box-img">
        <a href="#img4" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quartuno.html" alt="">
           <a href="#img6" class="btn" id="next">&#187;</a>
    </div>
    </div>
  <div class="lbox" id="img6">
    <div class="box-img">
        <a href="#img5" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="quarto.html" alt="">
           <a href="#img7" class="btn" id="next">&#187;</a>
    </div>
  <div class="lbox" id="img8">
    <div class="box-img">
        <a href="#img7" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="varan.html" alt="">
           <a href="#img1" class="btn" id="next">&#187;</a>
    </div>
</div>

Then I just repeated everything by changing the photos and their numbers.

html5

  • Are you using any script or jquery, or is it just css and html that you use to do this?

  • have you tried commenting .lbox {&#xA; //visibility: hidden;&#xA; //opacity: 0;&#xA;} ;

  • Ola hugocsl, I’m only using html and css.

1 answer

0

The element <img> does not accept as attribute for the property src an archive html, your proposal is to display images.

<img src="quartoun.html" alt="" class="min"> (This will never work...)

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.