Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 06.02.2016, 21:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Сообщение от olifus
по размеру - резко увеличиваются, а те, что были меньше, при наведении уменьшаются.
так используйте transform при hover как показано выше
Ответить с цитированием
  #12 (permalink)  
Старый 06.02.2016, 21:22
Интересующийся
Отправить личное сообщение для olifus Посмотреть профиль Найти все сообщения от olifus
 
Регистрация: 06.02.2016
Сообщений: 10

все, вопрос решил. обернул дополнительно div и прописал:
width: 360px;
overflow: hidden;
height: 225px;

рони, спасибо за помощь!
Ответить с цитированием
  #13 (permalink)  
Старый 06.02.2016, 21:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Сообщение от olifus
осталось решить overflow:hidden и похоже проблема будет решена.
так поставьте это свойство в родителя
<style type="text/css">.shortstory{
                       width:360px;
                       overflow:hidden;
                       height:225px;
                     }

                     .shortstory .img{
                       width:360px;
                       height:225px;
                       transition:0.5s;
                       background-position:center center;
                       background-size:cover;
                       background-repeat:no-repeat;
                       text-align:center;
                       margin-bottom:10px;
                       -webkit-transition:0.5s;
                       -moz-transition:0.5s;
                       -o-transition:0.5s;
                       transition:all .8s ease-in-out;
                     }

                     .shortstory .img:hover{
                       -webkit-transform:scale(1.2);
                       -moz-transform:scale(1.2);
                       -o-transform:scale(1.2);
                       transform:scale(1.2);
                     }
                     </style>
<div class="shortstory">
   <div class="img" style="background-image:url(http://www.androidpro.net/data/programs/images/sunny-forest-live-wallpaper_programView5_83983.png);"></div>
</div>
<div class="shortstory">
   <div class="img" style="background-image:url(http://www.wallpaperup.com/uploads/wallpapers/2014/04/09/328071/big_thumb_ff2d993a3140bfed6424550c461d77aa.jpg);"></div>
</div>
Ответить с цитированием
  #14 (permalink)  
Старый 06.02.2016, 21:27
Интересующийся
Отправить личное сообщение для olifus Посмотреть профиль Найти все сообщения от olifus
 
Регистрация: 06.02.2016
Сообщений: 10

внутри <div class="shortstory"> помимо картинки еще есть вывод других данных.
я так сделал:
<div><div class="img" style="background-image:url(http://www.androidpro.net/data/programs/images/sunny-forest-live-wallpaper_programView5_83983.png);"></div></div>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка на существование картинки Sherminator Events/DOM/Window 1 02.11.2013 17:04
Как запретить применение css при изменении окна браузера east (X)HTML/CSS 7 12.10.2012 21:23
Динамическое получение ширины и высоты окна браузера Esseron Элементы интерфейса 2 04.04.2011 16:00
стили Css в зависимости от высоты активной области браузера Vladimir_Kl Javascript под браузер 3 23.03.2011 16:04
Как создать окно, определенной ширины и высоты AnIva Events/DOM/Window 2 17.09.2008 09:17