1. <div id="gallery">
  2. <div id="switch1" class="switch"></div>
  3. <div id="switch2" class="switch"></div>
  4. <div id="switch3" class="switch"></div>
  5. <div class="slideFrame">
  6. <ul>
  7. <li><img src="img/gallery_visual1.jpg" alt="gallery_visual1" width="520" height="280"></li>
  8. <li><img src="img/gallery_visual2.jpg" alt="gallery_visual2" width="520" height="280"></li>
  9. <li><img src="img/gallery_visual3.jpg" alt="gallery_visual3" width="520" height="280"></li>
  10. </ul>
  11. </div>
  12. <ul class="nav">
  13. <li><a href="#switch1"></a></li>
  14. <li><a href="#switch2"></a></li>
  15. <li><a href="#switch3"></a></li>
  16. </ul>
  17. <p class="prev">
  18. <i></i>
  19. <a href="#switch1"></a>
  20. <a href="#switch2"></a>
  21. <a href="#switch3"></a>
  22. </p>
  23. <p class="next">
  24. <i></i>
  25. <a href="#switch1"></a>
  26. <a href="#switch2"></a>
  27. <a href="#switch3"></a>
  28. </p>
  29. <!-- /#gallery --></div>
  1. /* gallery items */
  2. #gallery ul li,
  3. #gallery ul li a,
  4. #gallery p,
  5. #gallery p i {
  6. background: url(../img/gallery_item.png);
  7. }
  8. /* gallery list button */
  9. #gallery ul.nav {
  10. width: 62px;
  11. margin: 0 auto;
  12. padding: 0;
  13. }
  14. #gallery ul.nav li {
  15. float: left;
  16. margin-right: 16px;
  17. background-position: -260px 0;
  18. }
  19. #gallery ul.nav li:last-child {
  20. margin-right: 0;
  21. }
  22. #gallery ul.nav li a {
  23. display: block;
  24. width: 10px;
  25. height: 10px;
  26. background-position: -260px -20px;
  27. }
  28. #gallery ul.nav li a:hover { opacity: 0; }
  29. /* slider arrow button */
  30. #gallery p,
  31. #gallery p a {
  32. position: absolute;
  33. top: 0;
  34. margin: 0;
  35. width: 110px;
  36. height: 320px;
  37. cursor: pointer;
  38. }
  39. #gallery .prev {
  40. left: 0;
  41. }
  42. #gallery .next {
  43. right: 0;
  44. background-position: -110px 0;
  45. }
  46. #gallery p i {
  47. display: block;
  48. width: 26px;
  49. height: 26px;
  50. margin: 140px 0 0 40px;
  51. background-position: -230px 0;
  52. }
  53. #gallery p:hover i {
  54. margin: 140px 0 0 32px;
  55. }
  56. #gallery .next i {
  57. margin-left: 44px;
  58. background-position: -230px -30px;
  59. }
  60. #gallery .next:hover i {
  61. margin-left: 52px;
  62. }
  63. /* CSS Programming */
  64. #gallery #switch1:target ~ .slideFrame ul {
  65. left: 90px;
  66. }
  67. #gallery #switch2:target ~ .slideFrame ul {
  68. left: -450px;
  69. }
  70. #gallery #switch3:target ~ .slideFrame ul {
  71. left: -990px;
  72. }
  73. #gallery #switch1:target ~ .nav li a[href="#switch1"],
  74. #gallery #switch2:target ~ .nav li a[href="#switch2"],
  75. #gallery #switch3:target ~ .nav li a[href="#switch3"] {
  76. opacity: 0;
  77. }
  78. #gallery .switch {
  79. display: none;
  80. }
  81. #gallery #switch1:target ~ .prev a:not([href="#switch3"]),
  82. #gallery #switch2:target ~ .prev a:not([href="#switch1"]),
  83. #gallery #switch3:target ~ .prev a:not([href="#switch2"]),
  84. #gallery #switch1:target ~ .next a:not([href="#switch2"]),
  85. #gallery #switch2:target ~ .next a:not([href="#switch3"]),
  86. #gallery #switch3:target ~ .next a:not([href="#switch1"]) {
  87. pointer-events: none;
  88. }
  89. /* transition */
  90. #gallery ul.nav li a {
  91. transition: opacity 0.5s ease 0s;
  92. -webkit-transition: opacity 0.5s ease 0;
  93. }
  94. #gallery i {
  95. transition: margin 0.3s ease 0s;
  96. -webkit-transition: margin 0.3s ease 0;
  97. }
  98. #gallery .slideFrame ul {
  99. transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0s;
  100. -webkit-transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0s;
  101. }