블로그 내 검색

2012. 4. 18.

자바스크립트를 사용하지 않은 CSS 이미지 갤러리

자바스크립트의 도움 없이, CSS의 의사 클래스(Pseudo-classes)를 사용해서 이미지 갤러리를 구현해보았습니다.
주로 사용한 것은 :target 과 :hover. 아래 #1 ~ #4 링크를 클릭해보세요~
Firefox나 Chrome 에서 잘 보입니다.

주의 : IE8 이하는 동작하지 않고, IE9는 트랜지션 효과가 제거되어 동작합니다.

사용한 CSS.
div#slide_container {
    position: relative;
    margin: 0 auto;
    width: 480px;
    height: 320px;
}

ul {
    list-style: none;
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
}

ul li {    
    height: 0px;
    overflow: hidden;
    opacity: 0;    
}

ul li img {
    margin: 0 auto;
    height: 320px;    
    box-shadow: 2px 3px 3px #666;
}

ul li:target {
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;    
    opacity: 1;
    height: 320px;
}

  • #1
  • #2
  • #3
  • #4
  • 링크를 클릭하세요!

댓글 없음:

댓글 쓰기