Understanding the CSS clip property

Γεια σας παιδιά. Καλο μηνα σε όλους!! Όχι δεν περίμενα να μπει η άνοιξη και μετά να βάλω ένα Widget στο blog απλά είχα πρόβλημα με το internet.


Αυτό το Widget που έχει ιδιότητες CSS έχει το χαρακτηριστικό μόλις το ποντίκι περάσει από πάνω του αποκαλύπτει την εικόνα.
Δείτε το demo.

Αντιγραφή τον κώδικα:

<style>
/* by foulscode.blogspot.gr */
img {
  position: absolute;
  left: 10px;
  top: 60px;
  display: block;
  clip: rect(200px, 0, 0, 400px);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
span:hover ~ img {
  clip: rect(0, 400px, 200px, 0);
}
span {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background: #08C;
  color: white;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: bold;
  text-shadow: 0 -1px rgba(0,0,0,0.3);
  text-align: center;
  cursor: pointer;
}
span:hover {
  background: #09C;
}
</style>
<span>Hover me</span>
<img src="http://lorempixel.com/400/200/">

DEMO

Αποθήκευση και είστε έτοιμοι.

Σύντομα και το v2