Βάλτε απλά σαν gadget τον παρακάτω κώδικα:
<style type='text/css'>
/* ================================================================a.opacity img {
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<style>
#cssplayGallery a,
body {behavior:url(cssplay18/trigger.htc)}
#cssplayGallery {position:relative; width:482px; margin:0 auto; height:382px; overflow:hidden;}
#cssplayGallery .cover {width:482px; height:100px; background:url(trans.gif); position:absolute; left:0; top:0; z-index:30;}
#cssplayGallery a {display:block; width:482px; height:302px; position:absolute; outline:0; background-color: 'transparent';
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#cssplayGallery a.p1 {top:100px; z-index:10;}
#cssplayGallery a.p2 {top:80px; z-index:9;}
#cssplayGallery a.p3 {top:64px; z-index:8;}
#cssplayGallery a.p4 {top:51px; z-index:7;}
#cssplayGallery a.p5 {top:41px; z-index:6;}
#cssplayGallery a.p6 {top:33px; z-index:5;}
#cssplayGallery a.p7 {top:26px; z-index:4;}
#cssplayGallery a.p8 {top:21px; z-index:3;}
#cssplayGallery a.p9 {top:17px; z-index:2;}
#cssplayGallery a.p1 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p5 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p6 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p7 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p8 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=10);}
#cssplayGallery a.p9 img {width:80px; padding:0 200px; opacity:0.1; filter: alpha(opacity=10);}
#cssplayGallery a img {display:block; border:0px solid #fff;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
/* IE browsers */
#cssplayGallery a:active {opacity:0;}
#cssplayGallery a.p1:active ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:active ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:active ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:active ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:active ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:active ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:active ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:active ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:active ~ a.p2 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p1:active ~ a.p3 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p1:active ~ a.p4 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p1:active ~ a.p5 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p1:active ~ a.p6 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p1:active ~ a.p7 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p1:active ~ a.p8 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}
#cssplayGallery a.p1:active ~ a.p9 img {width:100px; padding:0 190px; filter: alpha(opacity=15);}
#cssplayGallery a.p2:active ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:active ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:active ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:active ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:active ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:active ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:active ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:active ~ a.p3 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p2:active ~ a.p4 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p2:active ~ a.p5 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p2:active ~ a.p6 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p2:active ~ a.p7 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p2:active ~ a.p8 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p2:active ~ a.p9 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}
#cssplayGallery a.p3:active ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:active ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:active ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:active ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:active ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:active ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:active ~ a.p4 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p3:active ~ a.p5 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p3:active ~ a.p6 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p3:active ~ a.p7 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p3:active ~ a.p8 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p3:active ~ a.p9 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p4:active ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:active ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:active ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:active ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:active ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:active ~ a.p5 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p4:active ~ a.p6 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p4:active ~ a.p7 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p4:active ~ a.p8 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p4:active ~ a.p9 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p5:active ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:active ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:active ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:active ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:active ~ a.p6 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p5:active ~ a.p7 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p5:active ~ a.p8 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p5:active ~ a.p9 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p6:active ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:active ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:active ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:active ~ a.p7 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p6:active ~ a.p8 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p6:active ~ a.p9 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p7:active ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:active ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:active ~ a.p8 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p7:active ~ a.p9 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p8:active ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:active ~ a.p9 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p8:active {top:200px; z-index:13;}
/* non-IE browsers */
#cssplayGallery a:focus {opacity:0;}
#cssplayGallery a.p1:focus ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:focus ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:focus ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:focus ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:focus ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:focus ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:focus ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:focus ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:focus ~ a.p2 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p1:focus ~ a.p3 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p1:focus ~ a.p4 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p1:focus ~ a.p5 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p1:focus ~ a.p6 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p1:focus ~ a.p7 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p1:focus ~ a.p8 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p1:focus ~ a.p9 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=15);}
#cssplayGallery a.p2:focus ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:focus ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:focus ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:focus ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:focus ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:focus ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:focus ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:focus ~ a.p3 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2:focus ~ a.p4 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p2:focus ~ a.p5 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p2:focus ~ a.p6 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p2:focus ~ a.p7 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p2:focus ~ a.p8 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p2:focus ~ a.p9 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p3:focus ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:focus ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:focus ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:focus ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:focus ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:focus ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:focus ~ a.p4 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p3:focus ~ a.p5 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3:focus ~ a.p6 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p3:focus ~ a.p7 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p3:focus ~ a.p8 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p3:focus ~ a.p9 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p4:focus ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:focus ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:focus ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:focus ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:focus ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:focus ~ a.p5 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p4:focus ~ a.p6 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p4:focus ~ a.p7 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4:focus ~ a.p8 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p4:focus ~ a.p9 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p5:focus ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:focus ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:focus ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:focus ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:focus ~ a.p6 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p5:focus ~ a.p7 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p5:focus ~ a.p8 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p5:focus ~ a.p9 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p6:focus ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:focus ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:focus ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:focus ~ a.p7 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p6:focus ~ a.p8 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p6:focus ~ a.p9 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p7:focus ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:focus ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:focus ~ a.p8 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p7:focus ~ a.p9 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p8:focus ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:focus ~ a.p9 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p8:focus {top:200px; z-index:13;}</style>
<center>ΤΙΤΛΟΣ ΜΕΝΟΥ</center>
<div id="cssplayGallery">
<div class="cover"></div>
<a class="p1" href="#url" tabindex="1"><img src="JPG" alt="" /></a>
<a class="p2" href="#url" tabindex="2"><img src="JPG" alt="" /></a>
<a class="p3" href="#url" tabindex="3"><img src="JPG" alt="" /></a>
<a class="p4" href="#url" tabindex="4"><img src="JPG" alt="" /></a>
<a class="p5" href="#url" tabindex="5"><img src="JPG" alt="" /></a>
<a class="p6" href="#url" tabindex="6"><img src="JPG" alt="" /></a>
<a class="p7" href="#url" tabindex="7"><img src="JPG" alt="" /></a>
<a class="p8" href="#url" tabindex="8"><img src="JPG" alt="" /></a>
<a class="p9" href="#url" tabindex="9"><img src="JPG" alt="" /></a>
</div>
***απλά βάλτε τις φωτογραφίες σας, όπου βλέπετε "JPG"........
***MH βάλετε περισσότερες εικόνες...
***μη βγάλετε τα στοιχεία του δημιουργού...εκτιμήστε τον κόπο που έκανε να σας το χαρίσει...
***τους κώδικες CSS σας τους έβαλα αναλυτικά, για να μην εξαρτάται από την "εξαφάνιση" τους....
***να ξέρετε οτι ένας κώδικας CSS μπαίνει πάντα ανάμεσα στις λέξεις <style> CSS </style>
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!!!
Πηγή : www.cssplay.co.uk/ thanks to Stu Nicholls
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}