Pekná CSS3 fotogaléria
CSS:
#galeria {margin: 10px auto; float:left;}
#galeria a { position: relative; float: left; width: 100px; height: 75px; margin: 30px;}
#galeria img { width: 100px; height: 75px; padding:15px; border: 0; -moz-box-shadow: 1px 1px 7px #ccc; -webkit-box-shadow: 1px 1px 7px #ccc; -moz-transition: all 0.2s; -webkit-transition: all 0.2s;}
#galeria img:nth-child(n+1) { -moz-transform: rotate(5deg) skew(0deg, 0deg); -webkit-transform: rotate(5deg) skew(0deg, 0deg); -o-transform: rotate(5deg) skew(0deg, 0deg);}
#galeria a:hover {position: relative; z-index: 50; top: -55px; left: -75px;}
#galeria a:hover img {-moz-box-shadow: 1px 1px 12px gray; -webkit-box-shadow: 1px 1px 12px gray; width: 250px; height: 188px; background-color: #fff; -moz-transform: rotate(0deg) skew(0deg, 0deg); -webkit-transform: rotate(0deg) skew(0deg, 0deg); -o-transform: rotate(0deg) skew(0deg, 0deg);}
#galeria a { position: relative; float: left; width: 100px; height: 75px; margin: 30px;}
#galeria img { width: 100px; height: 75px; padding:15px; border: 0; -moz-box-shadow: 1px 1px 7px #ccc; -webkit-box-shadow: 1px 1px 7px #ccc; -moz-transition: all 0.2s; -webkit-transition: all 0.2s;}
#galeria img:nth-child(n+1) { -moz-transform: rotate(5deg) skew(0deg, 0deg); -webkit-transform: rotate(5deg) skew(0deg, 0deg); -o-transform: rotate(5deg) skew(0deg, 0deg);}
#galeria a:hover {position: relative; z-index: 50; top: -55px; left: -75px;}
#galeria a:hover img {-moz-box-shadow: 1px 1px 12px gray; -webkit-box-shadow: 1px 1px 12px gray; width: 250px; height: 188px; background-color: #fff; -moz-transform: rotate(0deg) skew(0deg, 0deg); -webkit-transform: rotate(0deg) skew(0deg, 0deg); -o-transform: rotate(0deg) skew(0deg, 0deg);}
Podobné články:
Toto je pekné
aj ten nový dizajn sa ti vydaril, super.
ale smola ze to ide len na firefoxi
a co google chrome, opera 10.5, ci safari?
a co IE ? nepreferujem IE ale to pouziva asi 50 % navstevnikov,
tam sa to da nastavit cez JS.. ie NIKDY nebude podporovat css3