IMAGES WITH FLOATING SCALE EFFECT

IMAGES WITH FLOATING SCALE EFFECT.

Με τον παρακάτω κώδικα μπορείτε να κλικάρετε πάνω σε μικρές εικόνες και να τις προβάλετε σε μία άλλη θέση με flοating scale effect. Μπορείτε να αλλάξετε τις διαστάσεις των μικρών εικόνων αλλάζοντας το width="240" που βρίσκεται στην 3^η γραμμή του κώδικα. Όσο μεγαλύτερες είναι οι εικόνες τόσο μεγαλύτερο θα είναι και το scale effect τους (δηλ. η μεγενθησή τους) μη δώσετε πλάτος πάνω από 250px. Εννοείτε πως μπορείτε να αλλάξετε τα πράσινα links των εικόνων με τα δικά σας link. Δείτε πως θα προβάλονται οι εικόνες όταν κάνετε κλίκ πάνω τους στο demo μετά τον κώδικα ▼.

<style>

ul.gallery {list-style:none;margin:0;padding:0;}

ul.gallery li {display: block;width: 240px;height:50px;position:relative;

-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

ul.gallery li img {position:relative;top:0px;left:0px;width:100%;border:5px solid #FF0000;

-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}

ul.gallery li:focus {position:relative;z-index:100;outline:none;pointer-events:none;top:0px; left:0px;}

ul.gallery li:focus img {top:0px;left:0px; -webkit-transform: scale(3) translateX(100%);

  -moz-transform: scale(3) translateX(100%);  transform: scale(3) translateX(100%); outline:none;}

ul.gallery li:first-of-type:focus img {top:0px;left:0px;}

svg {position:relative;top:0px;left:0px;visibility: hidden;}

</style>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<fecolormatrix type="matrix" values=

"0.1 0.1 0.1 0 0

0.1 0.1 0.1 0 0

0.1 0.1 0.1 0 0

0.1 0.1 0.1 0 0">

</fecolormatrix>

</svg>

<ul class="gallery" title="Tab">

<li tabindex="1"><img src="https://i.imgur.com/phbIVY1.jpg" /></li>

<li tabindex="2"><img src="https://i.imgur.com/Jrw6vMy.jpg" /></li>

<li tabindex="3"><img src="https://i.imgur.com/KGh0xkb.jpg" /></li>

<li tabindex="4"><img src="https://i.imgur.com/fiVofHI.jpg" /></li>

<li tabindex="5"><img src="https://i.imgur.com/9GqSG9a.jpg" /></li>

<li tabindex="6"><img src="https://i.imgur.com/7X4wjWS.jpg" /></li>

</ul>