CSS: мышь при наведении курсора меняет положение и размер изображения

Question

CSS: мышь при наведении курсора меняет положение и размер изображения

13

Я пытаюсь сделать меню кнопок для своего веб-сайта, и у меня проблема с положением изображения при наведении мыши. Это то, что я создал до сих пор http://jsfiddle.net/tNLUx/

При наведении курсора мыши я хочу, чтобы выбранное изображение увеличивалось, а другие сохраняли одно и то же положение, как и первое изображение. Как сделать уменьшенные изображения увеличиваться и перемещаться вниз, а не перемещаться вверх?

Вот некоторые из моих css

#btnSocial{
  width:100px;
  position: relative;
  opacity: 0.5;
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
}
#btnSocial:hover{
  width: 150px;
  opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}

Спасибо за ваше время

Приветствия

iniestar 20 фев. 2013, в 05:12

Источник

Теги:

html

css

css3

2 ответа

3

Отметьте http://jsfiddle.net/tNLUx/11/

Удалено position: relative; из css

#btnSocial{
    width:100px;
    opacity: 0.5;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;

}

999k 20 фев. 2013, в 04:10

0

это дает эффект, который я хочу, но я не могу контролировать начальную позицию изображения без позиции: относительная
iniestar 20 фев. 2013, в 15:44

Ещё вопросы

это дает эффект, который я хочу, но я не могу контролировать начальную позицию изображения без позиции: относительная

xpare · Accepted Answer · 2013-02-20T03-59-00.000Z

Используйте transform: scale(x, y) для масштабирования объекта.
Используйте transform: translate(x, y) для перемещения объекта.
Оба свойства также могут быть объединены: transform: scale(x, y) translate(x, y).

Пример:

.btn-social {
    width: 100px;
    position: relative;
    opacity: 0.5;
    transition: 0.3s ease;
    cursor: pointer;
}

.btn-social:hover {
    opacity: 1;

    /** default is 1, scale it to 1.5 */
    transform: scale(1.5, 1.5);

    /** translate 50px from left, and 40px from top */
    /** transform: translate(50px, 40px); */

    /** combine both scale and translate */
    /** transform: scale(1.5, 1.5) translate(50px, 40px); */
}

<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" /><br />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />

да, трансформировать: масштабировать результат довольно хорошо, проблема в том, что я не могу заставить другие изображения менять свою позицию с помощью масштабируемого объекта