1. <div id="gallery">
  2. <input type="radio" id="switch1" name="gallery" checked="checked">
  3. <input type="radio" id="switch2" name="gallery">
  4. <input type="radio" id="switch3" name="gallery">
  5. <div class="slideFrame">
  6. <ul>
  7. <li><a href="#"><img src="img/gallery_visual1.jpg" alt="gallery_visual1" width="520" height="280"></a></li>
  8. <li><a href="#"><img src="img/gallery_visual2.jpg" alt="gallery_visual2" width="520" height="280"></a></li>
  9. <li><a href="#"><img src="img/gallery_visual3.jpg" alt="gallery_visual3" width="520" height="280"></a></li>
  10. </ul>
  11. </div>
  12. <ul class="nav">
  13. <li><label for="switch1"></label></li>
  14. <li><label for="switch2"></label></li>
  15. <li><label for="switch3"></label></li>
  16. </ul>
  17. <p class="prev"><a href="#"></a></p>
  18. <p class="next"><a href="#"></a></p>
  19. <!-- /#gallery --></div>
  1. /* gallery items */
  2. #gallery ul li,
  3. #gallery ul li label,
  4. #gallery p,
  5. #gallery p a {
  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 label {
  23. display: block;
  24. width: 10px;
  25. height: 10px;
  26. background-position: -260px -20px;
  27. }
  28. #gallery ul.nav li label:hover { opacity: 0; }
  29. /* slider arrow button */
  30. #gallery p {
  31. position: absolute;
  32. top: 0;
  33. margin: 0;
  34. width: 110px;
  35. height: 320px;
  36. cursor: pointer;
  37. }
  38. #gallery p.prev {
  39. left: 0;
  40. }
  41. #gallery p.next {
  42. right: 0;
  43. background-position: -110px 0;
  44. }
  45. #gallery p a {
  46. display: block;
  47. width: 26px;
  48. height: 26px;
  49. margin: 140px 0 0 40px;
  50. background-position: -230px 0;
  51. }
  52. #gallery p:hover a {
  53. margin: 140px 0 0 32px;
  54. }
  55. #gallery p.next a {
  56. margin-left: 44px;
  57. background-position: -230px -30px;
  58. }
  59. #gallery p.next:hover a {
  60. margin-left: 52px;
  61. }
  62. /* CSS Programming */
  63. #gallery #switch1:checked ~ .slideFrame ul {
  64. left: 90px;
  65. }
  66. #gallery #switch2:checked ~ .slideFrame ul {
  67. left: -450px;
  68. }
  69. #gallery #switch3:checked ~ .slideFrame ul {
  70. left: -990px;
  71. }
  72. #gallery #switch1:checked ~ .nav li label[for="switch1"],
  73. #gallery #switch2:checked ~ .nav li label[for="switch2"],
  74. #gallery #switch3:checked ~ .nav li label[for="switch3"] {
  75. opacity: 0;
  76. }
  77. /* transition */
  78. #gallery ul.nav li label {
  79. transition: opacity 0.5s ease 0s;
  80. -webkit-transition: opacity 0.5s ease 0;
  81. }
  82. #gallery p a {
  83. transition: margin 0.3s ease 0s;
  84. -webkit-transition: margin 0.3s ease 0;
  85. }