Question

我试图在悬停图像时产生比例效果。问题是放大的图像与其邻居重叠，需要做什么才能使当前悬停的图像始终位于顶部？

＆＃13;

.col-sm-4 { padding: 0 !important; }

img { max-width: 100%; height: auto; }

.box {
    -webkit-transition:ease 0.7s;
    -moz-transition:ease 0.7s;
    -o-transition:ease 0.7s;
    transition:ease 0.7s;
    display: block;
}

.box:hover {
    position: relative;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 1;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <a class="box green">
                <img src="http://via.placeholder.com/525x525/478f00/ffffff">
            </a>
        </div>

        <div class="col-sm-4">
            <a class="box red">
                <img src="http://via.placeholder.com/525x525/aa001e/ffffff">
            </a>
        </div>

        <div class="col-sm-4">
            <a class="box blue">
                <img src="http://via.placeholder.com/525x525/00a0b0/ffffff">
            </a>
        </div>
    </div>
</div>

＆＃13;

Answer 1

你应该在每两个图像之间取一个边距。并将第二和第三类命名为与第一类不同的名称。

然后更改css代码中的每个类名，并申请第二个和第三个你为第一个类做的。

CSS比例图像重叠

1 个答案: