Pop-Up Image Viewer.

Δημιουργήστε όμορφα pop-up παράθυρα σε εικόνες ή συνδέσμους με χρήση css & html.
Ένα πολύ πρόχειρο παράδειγμα είναι το παρακάτω, που μπορείτε να χρησιμοποιήσετε ως css.
Από κει & πέρα μπορείτε να του προσθέσετε πολλά π.χ. εφέ αδιαφάνειας, αλλάγη στην εμφάνιση του περιγράμματος της εικόνας, σκιές....κτλ.

<!--PopUp-Image-Viewer-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<style type=”text/css”>
.imvle{
position:relative;
z-index:0;
}
.imvle:hover{
background-color:transparent;
z-index:50;
}
.imvle span{
position:absolute;
background-color:fff;
padding:5px;
left:-1000px;
border:1px solid #111;
visibility:hidden;
color:#000;
text-decoration:none;
}
.imvle span img{
border-width:0px;
padding:2px;
}
.imvle:hover span{
visibility:visible;
top:0;
left:60px;
}
</style>
<!--PopUp-Image-Viewer-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Και ο Html κωδικας του, είναι ο παρακάτω...

Για κείμενο:

<!--PopUp-Image-Viewer-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<a class="imvle" href="..."><img src="..." width="80px" height="50px" border="0" /><span><img src="...." /></span></a>
<!--PopUp-Image-Viewer-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Για εικόνα:

<!--PopUp-Image-Viewer-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<a class="imvle" href="...">....το κειμενο σας....<span><img src="...." /></span></a>
<!--PopUp-Image-Viewer-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!