Я хочу создать галерею, похожую на метро. Я уже достиг этого в примере с фоновыми изображениями:
http://codepen.io/DanielCoding/pen/jlrgv
Но я хочу заменить фоновые изображения обычными образскими тегами в div. К сожалению, все изображения растягиваются в правом нижнем направлении:
http://codepen.io/DanielCoding/pen/fsKjE/
В первом коде я решил это, предоставив изображениям разные значения фоновой позиции, но я не знаю подобную команду для простых тегов изображений или div.
Вы можете использовать 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;
}
Самый похожий метод "background-position", который вы можете использовать с простыми изображениями, - " CLIP ". Пожалуйста, посмотрите на ссылку, чтобы больше узнать об этом.
Я заменил 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);
}
Ручка здесь