Не получается

Timer · January 16, 2011

Добрый день, прошу помощи по 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>";
...

Что я делаю не так?

Timer · January 20, 2011

Ну кто нить, помогитеееееее!

psywalker · January 20, 2011

Ну кто нить, помогитеееееее!

Я тут!

Смотри, заметил ты используешь CSS3, а значит в ИЕ твой код точно работать не будет. Почему бы не использовать для этих целей чистый JS?

Sign In

Не получается

Question

Timer

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Timer

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information