Question

Здравствуйте помогите с таким вопросом. Поставил себе на сайт вот такое увелечение картинки:

.image {
overflow: hidden;
width: 380px;
height: 250px;
}

.image img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}

.image img:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}

Результат должен был быть таким: http://beloweb.ru/demo/uvimg/ , но у меня почему то картика увеличиваясь вылазиет за края, то есть не как в примере. Попробовал в первом контейнере реализовать у себя на сайте, в колонке "Популярное". Может кто подскажет как исправить?

Comments

В принципе ничего такого "смертельного" не увидел. То что вылезают изображения за пределы  - это нормально. Попробуйте протестировать на изображениях, которые практически одного размера, как у примера.

Answer 1

Надо так... http://jsfiddle.net/eep66Lh2/

<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" class="infTable"><tr><td class="infTd" width="33%"><div align="center" class="info"><br> <a href="http://plyk.ru/publ/v_mire_zagadok/zagadochnoe_i_neobjasnimoe/anomalnye_novosti/18-1-0-461" class="readmore"><span>Подробнее</span></a><br><div class="image"> <a href="http://plyk.ru/publ/v_mire_zagadok/zagadochnoe_i_neobjasnimoe/anomalnye_novosti/18-1-0-461"><img src="http://plyk.ru/_pu/4/43570471.png" title="Аномальные новости" width="250" height="150" class="normal-img"></a></div> <h3>Аномальные новости</h3>Аномальные новости куб вылетел из портала, на Сахалине обнаружили неи... </div></td><td class="infTd" width="33%"><div align="center" class="info"><br> <a href="http://plyk.ru/publ/v_mire_zagadok/zapretnaya_arxeologiya/piramidy_ostrova_jonaguni/11-1-0-207" class="readmore"><span>Подробнее</span></a><br><div class="image"> <a href="http://plyk.ru/publ/v_mire_zagadok/zapretnaya_arxeologiya/piramidy_ostrova_jonaguni/11-1-0-207"><img src=" http://plyk.ru/images/1/25th.jpg" width="250" height="150"class="normal-img"></a></div> <br><h3>Пирамиды острова Йон...</h3>Запретная археология и пирамиды сегодня идут рядом и стали почти одни... </div></td><td class="infTd" width="33%"><div align="center" class="info"><br> <a href="http://plyk.ru/publ/v_mire_zagadok/zapretnaya_arxeologiya/dinozavry_u_velikanov_drevnosti_byli_domashnimi_zhivotnymi/11-1-0-380" class="readmore"><span>Подробнее</span></a><br><div class="image"> <a href="http://plyk.ru/publ/v_mire_zagadok/zapretnaya_arxeologiya/dinozavry_u_velikanov_drevnosti_byli_domashnimi_zhivotnymi/11-1-0-380"><img src="http://plyk.ru/_pu/3/21742963.jpg" title="Динозавры у великано..." width="250" height="150" class="normal-img"></a></div> <br><h3>Динозавры у великано...</h3>Статья о том могли ли быть динозавры домашними животными у великанов ... </div></td></tr></table>


.image {
 overflow: hidden;
 width: 380px;
 height: 140px;
 }

.image img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 }

.image img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 }

Comments

Спасбо за помощь, но у меня это реалезовано в Информере и код выглядет так:

<div align="center" class="info"><br>
<div class="image"><a href="$ENTRY_URL$" class="readmore"><span>Подробнее</span></a><br>
<?if($IMG_URL1$)?><a href="$ENTRY_URL$"><img src="$IMG_URL1$" title="$TITLE$" width="250" height="150" class="normal-img"></a><?else?><a href="$ENTRY_URL$"><img src=" http://plyk.ru/images/1/25th.jpg" width="250" height="150"class="normal-img"></a><?endif?>
<br><h3>$TITLE$</h3><?substr($AUTHOR_SITE$,0,69)?>...
</div></div>

но я понял, все постарался сделать как вы написали, но к сожалению все тоже самое, может классы какие конфликтуют? у вас же работает. в ощем спасибо за помощь но не получилось. Я еще сделал другой информер в блоке "Популярное" но результат тот же. Но если нельзя реализовать как в пример, можно сделать что бы \тогда картинки увеличивались больше? Ну например они сейчас на 5 px увеличивается, а можно сделать что бы увеличивались на 20? 

 

---

Роман Мальцев,

Тогда так попробуйте...
<div align="center" class="info"><br>
 <a href="$ENTRY_URL$" class="readmore"><span>Подробнее</span></a><br>
 <?if($IMG_URL1$)?><div class="image"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" title="$TITLE$" width="250" height="150" class="normal-img"></a></div><?else?><a href="$ENTRY_URL$"><img src=" http://plyk.ru/images/1/25th.jpg" width="250" height="150"class="normal-img"></a><?endif?>
 <br><h3>$TITLE$</h3><?substr($AUTHOR_SITE$,0,69)?>...
 </div>

И в ксс это

.image {
  overflow: hidden;
  width: 380px;
  height: 140px;
  }

 .image img {
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  }

 .image img:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  }

---

Sentimo,

нет, все тот же эффект, ладно...