なかなか見かけることのないこのプロパティ。
ですが、『clip』プロパティを使った素敵なチュートリアルを見つけたのでご紹介したいと思います。
チュートリアルサイト

上記サイトでは、2つのデモを用意してくれています。
マウスホバーすると画像が横に表示
クリップされた画像がマウスホバーで横にこれまた、クリップした画像を表示させるデモです。

※ 画像です
CSS
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
ul { padding: 0; margin: 10px; list-style: none; width: 300px; height: 300px; box-shadow: 0 0 10px rgba(0,0,0,0.5); } ul:after { clear: both; content: ""; display: table; } li { position: relative; float: left; width: 100px; height: 100px; background: url(' http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/pw_maze_white.png'); cursor: pointer; } li:nth-of-type(3n+1) { clear: both; } img { position: absolute; display: block; clip: rect(0, 100px, 100px, 0); -webkit-transition: all 0.2s ease-out, z-index 0s; -moz-transition: all 0.2s ease-out, z-index 0s; transition: all 0.2s ease-out, z-index 0s; opacity: 0.9; } li:hover img { clip: rect(0, 300px, 300px, 0); z-index: 2; opacity: 1; } li:nth-of-type(3n+1):hover img { left: 310px; } li:nth-of-type(3n+2):hover img { left: 210px; } li:nth-of-type(3n):hover img { left: 110px; } li:nth-of-type(n+4):nth-of-type(-n+6):hover img { top: -100px; } li:nth-of-type(n+7):nth-of-type(-n+9):hover img { top: -200px; } |
詳しくは、上記チュートリアルサイトへ