photo album with HTML and CSS

Question

photo album with HTML and CSS

Navigation

#1 by (5 votes)

7

I have a folder on the site called PHOTOS , by clicking the PHOTOS folder I thought about putting several < article > sharing each photo album type:

< article > album de fotos 01 < article >
< article > album de fotos 02 < article >
< article > album de fotos 03 < article >

Each album of these I'm going to put more or less 10 to 15 photos in thumbnails, 200px by 200px . Can someone help me so that by clicking on each photo they open in a larger size?

If possible only with html and css, I also accept other suggestions as well. Hello my code

<article ="album-foto01">

 <ul>

    <li id="foto01"><img src="imagem.jpg"></li>      
    <li id="foto02"><img src="imagem1.jpg"></li>         
    <li id="foto03"><img src="imagem2.jpg"></li>
    <li id="foto04"> <img src="imagem3.jpg"></li>
    <li id="foto05"> <img src="imagem4.jpg"></li>
    <li id="foto06"> <img src="imagem5.jpg"></li>

<ul/>

<ul>
    <li id="foto01"><img src="imagen.jpg"></li>      
    <li id="foto02"><img src="imagem1.jpg"></li>         
    <li id="foto03"><img src="imagem2.jpg"></li>
    <li id="foto04"> <img src="imagem3.jpg"></li>
    <li id="foto05"> <img src="imagem4.jpg"></li>
    <li id="foto06"> <img src="imagem5.jpg"></li>

<ul/>

html html5 css

asked by anonymous 09.03.2018 / 14:52

1 answer

Should I use two IF's or an operator? What is the advantage of front-end frameworks like react?

score 5 · Accepted Answer

Here is a very simple template that can serve as an example and for studies.

The main thing is that it uses the pseudo class :target to change the opacity of the images and shows them in full size. Another thing is that it uses "anchors" to navigate between one image and another.

In the example there is <ul> with the thumbnails, and clicking on it with :target the big image appears. (Actually what appears is a "block" with all the elements inside, big image and navigation buttons. So when you change from one image to another you are actually changing the navigation btns, only you does not perceive this exchange visually because it is an element in the same place of the other.Just the image that you perceive because they are different.)

Now let's get down to the code!

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
.lbox {
    visibility: hidden;
    opacity: 0;
}
ul {
    width: 800px;
    list-style: none;
    display: flex;
    margin: 100px auto;
}
.min {
    width: 200px;
    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;    
}

<ul>
    <li><a href="#img1"><img src="http://placecage.com/800/400"alt="" class="min"></a></li>
    <li><a href="#img2"><img src="http://fillmurray.com/800/400"alt="" class="min"></a></li>
    <li><a href="#img3"><img src="http://placecage.com/800/401"alt="" class="min"></a></li>
    <li><a href="#img4"><img src="http://fillmurray.com/800/401"alt="" class="min"></a></li>
</ul>

<div class="lbox" id="img1">
    <div class="box-img">
        <a href="#img4" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="http://placecage.com/800/400"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="http://fillmurray.com/800/400"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="http://placecage.com/800/401"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="http://fillmurray.com/800/401"alt="">
        <a href="#img1" class="btn" id="next">&#187;</a>
    </div>
</div>

OBS1: Some values are in PX so it is not 100% responsive, but you can even sort it rss

OBS2: It is not dynamic, for each image you will have to create the block .lbox new and do the "link anchoring"

OBS3: Reference link for the example I used.