Аналогично команде «background-position» для divs / изображений в CSS

0

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

http://codepen.io/DanielCoding/pen/jlrgv

Но я хочу заменить фоновые изображения обычными образскими тегами в div. К сожалению, все изображения растягиваются в правом нижнем направлении:

http://codepen.io/DanielCoding/pen/fsKjE/

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

Теги:

3 ответа

0
Лучший ответ

Вы можете использовать transform для масштабирования изображения и transform-origin чтобы управлять направлением масштаба.

.star1:hover,
.star2:hover,
.star3:hover,
.star4:hover {
    -webkit-transition: -webkit-transform 0.2s;
    -webkit-transform: scale(1.2);
}

.star1:hover {
  -webkit-transform-origin: bottom right;
}

.star2:hover {
  -webkit-transform-origin: bottom left;
}

.star3:hover {
  -webkit-transform-origin: top right;
}

.star4:hover {
  -webkit-transform-origin: top left;
}

http://codepen.io/anon/pen/oxsge/

0

Самый похожий метод "background-position", который вы можете использовать с простыми изображениями, - " CLIP ". Пожалуйста, посмотрите на ссылку, чтобы больше узнать об этом.

0

Я заменил background-image простым img и проверить это, если это то, что вы ищете.

star1,
.star2,
.star3,
.star4{
    background-size: 150px;
    background-repeat: no-repeat;
    background-clip: border-box;
    transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    padding:0;
    margin:0;
}

.star1:hover,
.star2:hover,
.star3:hover,
.star4:hover{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

Ручка здесь

  • 0
    Привет и спасибо Но моя цель - сделать первое изображение растянутым слева вверху, второе справа сверху, третьим слева внизу и последним справа внизу.
  • 0
    проверьте обновленную ручку, вот и закрытие, которое я получаю :) и я думаю, что Катранчи получил его для вас.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню