CSS Animated Image Galleries

HTML Structure

This is the structure of the main div

<div id="ImageGalleries">
  <div class="photo"> ... </div>
</div>

Now we see the div photo syntax and how to insert the image and its description
The structure is as follows:

<div class="photo n1">
  <a href=""><img src="pics/iceland_b.jpg" alt="Iceland" title="Iceland" /></a>
  <div class="description">
    <h3>Photo title</h3>
    <p>Short description of up to 2 or 3 lines.</p>
    <dl>
      <dt>Subtitle 1, for example: location</dt>
      <dd>Description</dd>
      <dt>Subtitle 2, for example: date</dt>
      <dd>Description</dd>
      ...etc...
    </dl>
  </div>
</div>

Warning, be sure to include the class "n1" "n2", etc. ... in the div containing the photo and description.
You can enter up to 8 photos at a time.

<div class="photo n1"></div>
<div class="photo n2"></div>
<div class="photo n3"></div>
<div class="photo n4"></div>
<div class="photo n5"></div>
<div class="photo n6"></div>
<div class="photo n7"></div>
<div class="photo n8"></div>

The photos to be included are 16:9, you can add vertical photos adding the class "portrait" in the container div, following the example:

<div class="photo portrait n1"></div>
...etc...

---

CSS Structure

In CSS you can put all the values ​​that will allow you to change the position and size of the photos at your leisure

PHOTO POSITION
#ImageGalleries .photo.n1 a img { top: 150px; left: 30px }

WIDE PHOTO SIZE
#ImageGalleries .photo a img { width: 300px; height: 170px }

PORTRAIT PHOTO SIZE
#ImageGalleries .photo.portrait a img { width: 170px; height: 300px }

---

FONTS

The font used is the "Franklin Gothic Medium Cond".

---

The customization of the images is very simple to add more, as well as 8 by default, you should add other classes (n9, n10, n11, etc...) For any questions, please feel free to contact me.