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

Я пытаюсь создать страницу, в которой, если пользователь hover над любым изображением, которое находится внутри обертки div, изображение будет увеличиваться немного вверх из оболочки div, но с моим кодом изображение только увеличивает его ширину и остается внутри в обертки ДИВ только для, например:Как увеличить изображение только в сторону вверх из его ширины контейнера, когда он наводится на него?

.Wrap { 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 
.Wrap ul { 
 
    list-style: none; 
 
    padding: 15px; 
 
} 
 
.Wrap ul li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    transition: background-color 0.3s ease-in-out; 
 
} 
 
.Wrap ul li:hover { 
 
    background-color: blue; 
 
} 
 
.Images { 
 
    width: 100px; 
 
    transition: width 0.8s ease, height 0.8s ease; 
 
} 
 
.Wrap ul li:hover .Images { 
 
    width: 300px; 
 
}

<body> 
 
    <div class="Wrap"> 
 
    <ul> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1"> 
 
     </li> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2"> 
 
     </li> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3"> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

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

.Wrap { 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 
.Wrap ul { 
 
    list-style: none; 
 
    padding: 15px; 
 
} 
 
.Wrap ul li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    transition: background-color 0.3s ease-in-out; 
 
} 
 
.Wrap ul li:hover { 
 
    background-color: blue; 
 
} 
 
.Images { 
 
    width: 100px; 
 
    transition: width 0.8s ease, height 0.8s ease; 
 
} 
 
.Wrap ul li:hover .Images { 
 
    width: 300px; 
 
    position:relative; 
 
    bottom:100px; 
 
}

<body> 
 
    <div class="Wrap"> 
 
    <ul> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1"> 
 
     </li> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2"> 
 
     </li> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3"> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

Мое требование для вывода такое, что изображение должно увеличивать его ширину и должно увеличиваться примерно на 40-50 пикселей выше его обертки , а также ее фон не поврежден.

источник

2016-08-31 Mehul Chachada

Ваша обертка не имеет набор высоты, поэтому CSS предполагает, что это жидкость. Он всегда будет увеличивать высоту, чтобы разместить элементы внутри, если только вы не обеспечиваете ее высотой. – Santi

Поскольку вы перечислили CSS3, я попытался сделать переход с scale() и translate3d(), а не width и height. Это больше того, чего вы хотели достичь? Вы можете играть со шкалой и переводить значения на <li> и <img> по вашему вкусу.

Вам также необходимо добавить правильный CSS, чтобы сделать его кросс-браузер.

.Wrap { 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    position: relative; 
 
} 
 
.Wrap ul { 
 
    list-style: none; 
 
    padding: 15px; 
 
} 
 
.Wrap ul li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    transform: scale(1) translate3d(0, 0, 0); 
 
    transition: background-color 0.3s ease-in-out, transform 0.8s ease; 
 
} 
 
.Wrap ul li:hover { 
 
    background-color: blue; 
 
    transform: scale(1.8) translate3d(0, -20px, 0); 
 
} 
 

 
.Images { 
 
    width: 100px; 
 
    /* transition: width 0.8s ease, height 0.8s ease; */ 
 
} 
 
.Wrap ul li:hover .Images { 
 
/* 
 
    width: 300px; 
 
    position:relative; 
 
    bottom:100px; 
 
    transform: scale(2); 
 
*/ 
 
}

<div class="Wrap"> 
 
    <ul> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1"> 
 
     </li> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2"> 
 
     </li> 
 
     <li> 
 
     <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3"> 
 
     </li> 
 
    </ul> 
 
    </div>

источник

2016-08-31 21:07:17 skyline3000

Спасибо за помощь помощник :)! –

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

ответ

Смежные вопросы