Skip to content

Instantly share code, notes, and snippets.

@AvraamMavridis

AvraamMavridis/GJagPr.markdown

Last active August 29, 2015 14:27
Show Gist options
  • Save AvraamMavridis/511186f86061420fda40 to your computer and use it in GitHub Desktop.
Save AvraamMavridis/511186f86061420fda40 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Clip-path pen
Raw
index.html
<html>
<body>
<section>
<div class="item">
</div>
<div class="item">
<div class="image" id="image1"></div>
<article>
Ρυθμών και Στοχασμών άυλα φτερά και χέρια<br>
τη λυτρωμένη την ψυχή σου απ' το κορμί της<br>
την πήραν και την παν ολόισα προς τ' αστέρια'<br>
στέκετ' εκεί η πομπή και κόβει την ορμή της.<br><br>
Στων παραδείσων τα υπερκόσμια καλοκαίρια,<br>
στης Λύρας τ' άστρο, εκεί που ο ψάλτης και ο τεχνίτης<br>
λάμπουν αθάνατ' από πνεύμα περιστέρια,<br>
του Σολωμού σε σέρνει ο ίσκιος ο μαγνήτης.<br>
<br><b>Κωστής Παλαμάς</b></br>
</article>
</div>
<div class="item">
<div class="image" id="image2"></div>
<article>
Θεοί, αρχόντοι, βασιλιάδες<br>
με πλάνα λόγια μας γελούν<br>
της γης οι δούλοι κι οι ραγιάδες<br>
μοναχοί τους, θα σωθούν...<br>
Για να λείψουν τα δεσμά μας<br>
για να πάψει πια η σκλαβιά<br>
να νιώσουν πρέπει τη γροθιά μας<br>
και της ψυχής μας τη φωτιά.<br><br>
Και αν τολμήσουν και αντικρίσουν<br>
της ψυχής μας τους κεραυνούς<br>
θα δούνε τότε αν μπορούνε<br>
πως θα είναι οι σφαίρες μας για αυτούς<br>
<br><b>Κώστας Βάρναλης</b></br>
</article>
</div>
<div class="item">
<div class="image" id="image3"></div>
</div>
<div class="item"></div>
</section>
</body>
</html>
Raw
style.css
@import 'compass';
$finalpath: polygon(100% 0, 100% 100%, 100% 100%, 43% 100%, 27% 100%, 0 100%, 0 93%, 0 76%, 0 52%, 0 0);
body{
display: flex;
flex-direction: row;
flex-flow: wrap;
background: #1B1F22;
section{
display: flex;
width: 100%;
margin: auto;
.item{
width: 280px;
height: 280px;
margin: 10px 10px;
transition: all 1s ease 1s;
.image {
position: absolute;
background-position: center;
background-size: cover;
background-blend-mode: multiply;
width: 280px;
height: 280px;
transition: -webkit-clip-path 0.5s ease 0.5s, background-color 0.5s ease 0.5s, z-index 1s ease;
}
article{
text-align: center;
color: black;
position: absolute;
top: 320px;
left: 0px;
width: 0px;
padding: 20px;
background-color: transparent;
height: 0px;
opacity: 0;
transition: all 2s ease 1s;
}
}
}
}
#image1{
left: 10px;
background-image: url('https://igcdn-photos-f-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11259755_735911609888661_1609589762_n.jpg');
background-color: yellow;
clip-path: polygon(30% 60%, 43% 61%, 46% 64%, 41% 67%, 39% 73%, 29% 76%, 17% 74%, 17% 70%, 24% 68%, 26% 65%);
}
#image1:hover, #image2:hover, #image3:hover{
background-color: transparent;
clip-path: $finalpath;
z-index: 1000;
cursor: pointer;
}
#image1:hover + article, #image2:hover + article{
background-color: white;
opacity: 1;
width: 100%;
height: 300px;
}
#image2{
left: 10px;
background-image: url('https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11363801_1477232309261364_886758803_n.jpg');
background-color: red;
clip-path: polygon(78% 51%, 76% 89%, 70% 87%, 76% 100%, 43% 97%, 41% 89%, 45% 50%, 54% 50%, 63% 50%, 68% 51%);
}
#image3{
left: 0px;
background-image: url('https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11379258_1002699023082380_2058851501_n.jpg');
background-color: #F0F4C3;
clip-path: polygon(78% 45%, 80% 59%, 60% 59%, 50% 59%, 32% 59%, 18% 59%, 19% 45%, 24% 45%, 40% 45%, 53% 45%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment