Я пытаюсь создать навигационное меню, используя 3 изображения. Когда вы наводите на них курсор, я расширяю находящегося в воздухе, а остальные сворачиваю. Сложная часть - это перекос, который я делаю. Я смог заставить его отодвинуть фон, но не могу сделать так, чтобы фон был в центре изображения, где находится основной контент. Кажется, он начинается в левом верхнем углу изображения, а не в центре.
Я надеялся, что кто-нибудь сможет указать мне правильное направление. Как я могу центрировать фоновое изображение вместо того, чтобы фон начинался слева вверху? Я попытался использовать свойства background-position без удачи.
Спасибо!
https://jsfiddle.net/jspada/4jrhc2eb/5/
.diagonal_box_a {
transform: skewX(35deg);
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 250px;
height: 357px;
border-right: 1px solid black;
border-left: 1px solid black;
/* new styles */
position: relative;
top: 0;
right: 0;
overflow: hidden;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
transition: width 0.5s ease;
}
.diagonal_box_a:hover {
width: 750px;
}
.diagonal_box_a::before {
content: "";
transform: skewX(-35deg);
-ms-transform: skewX(-35deg); /* IE 9 */
-webkit-transform: skewX(-35deg); /* Safari and Chrome */
border: 1px solid red;
background-image: url("img/placeholder_desert.jpeg");
background-repeat: no-repeat;
background-position: top left;
position: absolute;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
width: 1500px; /* something ridiculously big */
height: 1500px; /* something ridiculously big */
}
