Я пытаюсь сделать так, чтобы мои изображения работали так: http://www.kas.tw/ (наведите над изображениями под каруселью изображений), но мои изображения расширяются сбоку, и я не могу понять, как сделать так, чтобы изображение все еще оставалось в своей коробке, вот код.

Css

#image3{
top: 130%;
left: 20%;
display: none;
}
#cover1{
width: 5%;
height: 100%;
left: 47%;
background-color: green;
z-index: 2;
top: 94%;
position: absolute;
}
.zoom {
    padding: 50px;

    transition: transform .2s; /* Animation */

    margin: 0 auto;
}
.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, 
it will go outside of the viewport) */
}

Html

<DIV class='zoom' id='image1'><IMG width='50%' height='90%' src="slime3.JPG"></DIV>
        <DIV  id='image2'><IMG width='50%' height='90%' src="slime4.JPG"></DIV>
        <DIV  id='image3'><IMG width='50%' height='90%' src="slime5.JPG"></DIV>
        <DIV  id='image4'><IMG width='50%' height='90%' src="slime6.JPG"></DIV>
        <DIV  id='image5'><IMG width='50%' height='90%' src="slime7.JPG"></DIV>
        <DIV  id='image6'><IMG width='50%' height='90%' src="slime8.JPG"></DIV>
        <DIV id='cover1'><DIV>
            <DIV id='cover2'><DIV>
                <DIV id='cover3'><DIV>
                    <DIV id='cover4'><DIV>
                        <DIV id='cover5'><DIV>
2
Loren Meehan 8 Окт 2018 в 07:37

2 ответа

Лучший ответ

Вы можете оставить изображения в блоке, не увеличивая размер контейнера .

Это можно сделать исключительно на CSS, используя max-width, max-height для установки определенного размера блока и используя overflow: hidden, чтобы скрыть лишнее изображение, когда оно расширяется за пределы ширины и высоты.

transform: scale(2,2) позволяет увеличивать изображение от центра.

Попробуй это:

#holder {
  max-width: 200px;
  max-height: 200px;
  overflow: hidden;

}

#holder img {
  width: 100%;
   -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#holder img:hover {
  transform: scale(2,2);
}
<div id="holder">
  <img src="https://picsum.photos/200/200">
</div>
1
Gosi 8 Окт 2018 в 05:24

Вы можете попробовать это

<div class="item">
<img>..</img>
</div>

И для css

 .item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
1
akshay kishore 8 Окт 2018 в 05:01