POPUP WINDOWS WITH TEXT IMAGES AND VIDEOS

ΑΓΙΟΦΥΛΙ ΛΕΥΚΑΔΑ
×

Η ΠΑΡΑΛΙΑ ΑΓΙΟΦΥΛΙ ΣΤΗ ΛΕΥΚΑΔΑ

ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ
×

Η ΠΑΡΑΛΙΑ ΝΑΥΑΓΙΟ ΣΤΗ ΖΑΚΥΝΘΟ

ΜΥΡΤΟΣ ΚΕΦΑΛΟΝΝΙΑ
×

Η ΠΑΡΑΛΙΑ ΜΥΡΤΟΣ ΣΤΗ ΚΕΦΑΛΟΝΝΙΑ

ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΚΕΡΚΥΡΑ
×

Η ΠΑΡΑΛΙΑ ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΣΤΗ ΚΕΡΚΥΡΑ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style>
.button {font:13px Arial;padding:5px;border:2px solid #FBBB22;background:#173377;color:#FFF;border-radius:5px;text-decoration:none;cursor:pointer;transition:all 0.2s ease-out;}
.button:hover {background:#105105;color:#FFF;border-color:#00FF00;}
.button:active {background:#255720;color:#FFF;border-color:#00FF00;}
.overlay {position:fixed;top:31px;left:0px;background:none;transition:opacity 200ms;visibility:hidden;opacity:0; z-index:999;}
.overlay .cancel {position: absolute;width: 100%;height: 100%;cursor: default;}
.overlay:target {visibility: visible;opacity:1; z-index:999;}
.popup {width:auto;height:auto;margin:0;padding:5px;background:#115599;color:#FFF;border: 2px solid #F11111;position:relative; z-index:999;}
.popup .close {position: absolute;width:20px;height:20px;top:5px;right:5px;opacity:1;transition: all 200ms;font:bold 24px Arial;text-decoration:none;color: #FFFF00; z-index:999;}
.popup .close:hover {opacity: 1;}
.popup .content {max-height: 1200px;overflow: auto;}
</style>

<a class="button" href="#popup1">ΑΓΙΟΦΥΛΙ ΛΕΥΚΑΔΑ</a>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">&times;</a>
<div class="content">
<p><span style="background:#F11111;color:#FFF;font:14px Arial;">Η ΠΑΡΑΛΙΑ ΑΓΙΟΦΥΛΙ ΣΤΗ ΛΕΥΚΑΔΑ</span></p>
<img src="https://i.imgur.com/PP5nCr5l.jpg" width="480" height="300"/>
<iframe width="480" height="300" src="https://www.youtube.com/embed/gjmEIb1MQPU" frameborder="0" allowfullscreen></iframe>
</div></div></div>
<a class="button" href="#popup2">ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ</a>
<div id="popup2" class="overlay">
<div class="popup">
<a class="close" href="#">&times;</a>
<div class="content">
<p><span style="background:#F11111;color:#FFF;font:14px Arial;">Η ΠΑΡΑΛΙΑ ΝΑΥΑΓΙΟ ΣΤΗ ΖΑΚΥΝΘΟ</span></p>
<img src="https://i.imgur.com/fiVofHIl.jpg" width="480" height="300"/>
<iframe width="480" height="300" src="https://www.youtube.com/embed/YSuo0j2xsj8?rel=0&start=22&end=235&autoplay=0&loop=1&playlist=YSuo0j2xsj8" frameborder="0" allowfullscreen></iframe>
</div></div></div>
<a class="button" href="#popup3">ΜΥΡΤΟΣ ΚΕΦΑΛΟΝΝΙΑ</a>
<div id="popup3" class="overlay">
<div class="popup">
<a class="close" href="#">&times;</a>
<div class="content">
<p><span style="background:#F11111;color:#FFF;font:14px Arial;">Η ΠΑΡΑΛΙΑ ΜΥΡΤΟΣ ΣΤΗ ΚΕΦΑΛΟΝΝΙΑ</span></p>
<img src="https://i.imgur.com/qrKer61l.jpg" width="480" height="300"/>
<iframe width="480" height="300" src="https://www.youtube.com/embed/t9tS-3QZMC8?rel=0&autoplay=0&loop=1&playlist=t9tS3QZMC8" frameborder="0" allowfullscreen></iframe>
</div></div></div>
<a class="button" href="#popup4">ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΚΕΡΚΥΡΑ</a>
<div id="popup4" class="overlay">
<div class="popup">
<a class="close" href="#">&times;</a>
<div class="content">
<p><span style="background:#F11111;color:#FFF;font:14px Arial;">Η ΠΑΡΑΛΙΑ ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΣΤΗ ΚΕΡΚΥΡΑ</span></p>
<img src="https://i.imgur.com/Pq9Dexa.jpg" width="480" height="300" />
<iframe width="480" height="300" src="https://www.youtube.com/embed/9DHBkkJ-_hY" frameborder="0" allowfullscreen></iframe></div></div></div>