时间戳

首页 > 解决方案 > 使图像在悬停时从中心展开并使图像仍留在框中

html - 使图像在悬停时从中心展开并使图像仍留在框中

问题描述

我试图让我的图像像这样：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>

标签： htmlcss

解决方案

你可以试试这个

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

和CSS

 .item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

推荐阅读