Ultimele tutoriale de dezvoltare web
 

CSS Galerie de imagini


CSS poate fi folosit pentru a crea o galerie de imagini.

Trolltunga Norvegia
Adăugați o descriere a imaginii aici
pădure
Adăugați o descriere a imaginii aici
Auroră boreală
Adăugați o descriere a imaginii aici
Munţi
Adăugați o descriere a imaginii aici

Galerie de imagini

Următoarea galerie imagini este creat cu CSS:

Exemplu

<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="fjords.jpg">
    <img src="fjords.jpg" alt="Fjords" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="forest.jpg">
    <img src="forest.jpg" alt="Forest" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="mountains.jpg">
    <img src="mountains.jpg" alt="Mountains" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>
Încearcă - l singur »

Exemple

Mai multe exemple

Receptivă Galeria de imagini
Cum să utilizați interogări media CSS3 pentru a crea o galerie de imagini receptiv.

Avansate: Modal Imagini poate face clic (JS)
Un exemplu de modul de utilizare a JavaScript împreună cu CSS pentru a afișa imagini neaccesate într-o cutie modal.