Απλό CSS + HTML Slideshow / gallery

Νέοι bloggers γεια σας !!! Σήμερα σας παρουσιάζω ένα απλό image gallery...μπορείτε να δείτε το DEMO και να δοκιμάσετε να φτιάξετε ένα παρόμοιο, παρουσιάζοντας τις δικές σας εικόνες...


Ο ΚΩΔΙΚΑΣ CSS: (ΠΑΝΩ από το </head>)

<style type="text/css">

<!--/* The slideshow CSS. Customize to meet your taste. */.slideshow {
font-family:Arial, Helvetica, sans-serif;
width:336px;
height:375px;
overflow:hidden;
background-color:#000000;
color:#FFFFFF;
border:5px solid #99CC00;
}
.slideshow > ul {
margin: 0;
padding: 0;
}
.slideshow > ul > li {
display:inline;
margin:0px;
padding:0px;
font-size:1px;
margin-right: -1px;
}
.slideshow > ul > li > div {
  display: none;
  text-decoration: none;
  float:left;
}
.slideshow > ul > li > div > p {
  font-size:11px;
  text-align:center;
  padding:10px 0px 0px 0px;
  margin:0px;
  color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
border:2px solid #FFFFFF;
width:332px;
}
.slideshow  > ul > li > img {
border:2px solid #FFFFFF;
margin:0px;
padding:0px;
width:80px;
height:60px;
}

/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
border-color:#FF6600;
}-->
</style>


O ΚΩΔΙΚΑΣ  HTML: (σαν Gadget / JavaScript)


<div class="slideshow">
    <ul>
        <li>
            <img src="ΕΙΚΟΝΑ 1" />
                        <div>
      <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 1" alt="ΤΙΤΛΟΣ" />  </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>  <img src="ΕΙΚΟΝΑ 2" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 2" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>
            <img src="ΕΙΚΟΝΑ 3" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 3" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>
            <img src="ΕΙΚΟΝΑ 4" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 4" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
    </ul>
</div>

***Οι άπειροι, μπορούν να ενώσουν και τους 2 κώδικες και να το δουν πως φαίνεται στο  DEMO BLOG μου
***Φυσικά και μπορείτε να ενώσετε και τους 2 κώδικες και να το βάλετε στο blog σας σαν gadget !

***Αντικαταστήστε τις λέξεις ΛΙΝΚ, ΚΕΙΜΕΝΟ, ΤΙΤΛΟΣ, ΛΙΝΚ με τα ανάλογα δικά σας...

***Oσοι γνωρίζουν πως, μπορούν να πειράξουν μεγέθη, χρώματα κλπ στον πρώτο κώδικα...όσοι δεν γνωρίζουν, ας το αφήσουν όπως είναι, η να ρωτήσουν απορίες στα σχόλια, η με email ...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
(Πηγή θα βρείτε όταν δείτε και το demo)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}