Добрый день, прошу помощи по CSS вот в каком вопросе. Пытаюсь сделать CSS галерею, такую, что при наведении курсора, фотография плавно перетекала из уменьшенного размера в свой исходный. Пример подобной галлереи: .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } Проблема моя вот в чем, загружаются на сайт фотки с произвольным размером от 400*300, до 1280*758 итд., а иконки этих фотографий не делаются. Для обработки и уменьшения фоток используется свой скрипт. т.е. на выходе всегда маленькие изображения, которые прошли через ресайз. Соответственно, если их применить (уже урезанные, маленькие изображения), то при увеличении получается картинка плохого качества. Далее есть следующий скрипт, показывающий возможность применения 2х картинок, одна стандартного размера, другая увеличивается при наведении курсора. CSS: .hoverbox a .preview { display: none; } .hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -45px; z-index: 1; border-color: #000; width: 200px; height: 150px; } и HTML: <body> <h1>Hoverbox Image Gallery</h1> <ul class="hoverbox"> <li> <a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a> </li> ... </ul> А вот что делаю я: CSS: .hovergallery a { -webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(1); /*Mozilla scale version*/ -o-transform:scale(1); /*Opera scale version*/ -webkit-transition-duration: 0.7s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.7s; /*Mozilla duration version*/ -o-transition-duration: 0.7s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ border: 2px solid 742136; } .hovergallery a img .preview{ display: none; } .hovergallery a img:hover .preview { -webkit-transform:scale(8); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(8); /*Mozilla scale version*/ -o-transform:scale(8); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } и HTML: ... echo "<td> <div class=\"hovergallery\ ><a href=\"$path/$imgname3\"><img src=\"resize.php?filename=$value3&size=200\" width=\"110\" border=\"1\" ><img src=\"$path/$imgname3\" class=\"preview\" /></a></div></td>"; ... Что я делаю не так?
