Question

我想知道一种方法来消除代码中与悬停的图像相邻的图像问题（请注意，当您将其悬停时，有时会重叠，有时会与未悬停的图像重叠）。我希望悬停的图像始终重叠。

这是codepen链接：https://codepen.io/dantedev/pen/XxRYrq

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>ReSail - Sail Your Resale to Great Lengths</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <a href="#" class="homeLink">Home</a>
        <div class="container">
            <div class="row">
                <div class="col-md-4"><a href="#"><img class="profile" src="https://hopsandbarleyco.com/wp-content/uploads/2017/02/Beer-Snob-Snap-Back-Hat-Heather-Gray-Background.jpg"></a></div>
                <div class="col-md-4"><a href="#"><img class="profile" src="https://hopsandbarleyco.com/wp-content/uploads/2017/02/Beer-Snob-Snap-Back-Hat-Heather-Gray-Background.jpg"></a></div>
                <div class="col-md-4"><a href="#"><img class="profile" src="https://hopsandbarleyco.com/wp-content/uploads/2017/02/Beer-Snob-Snap-Back-Hat-Heather-Gray-Background.jpg"></a></div>
            </div>
            <div class="row">
                <div class="col-md-4"><a href="#"><img class="profile" src="https://hopsandbarleyco.com/wp-content/uploads/2017/02/Beer-Snob-Snap-Back-Hat-Heather-Gray-Background.jpg"></a></div>
                <div class="col-md-4"><a href="#"><img class="profile" src="https://hopsandbarleyco.com/wp-content/uploads/2017/02/Beer-Snob-Snap-Back-Hat-Heather-Gray-Background.jpg"></a></div>
                <div class="col-md-4"><a href="#"><img class="profile" src="https://hopsandbarleyco.com/wp-content/uploads/2017/02/Beer-Snob-Snap-Back-Hat-Heather-Gray-Background.jpg"></a></div>
            </div>
        </div>
    </body>
</html>

CSS

.homeLink {
    text-decoration: none;
    font-size: 24px;
    color: #000000;
    padding: 20px;
}

.container {
    margin-top: 20px;
}

.profile {
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
    transition: transform 0.8s;
    z-index: 1;
}

.profile:hover{
    transform: scale(1.2);
}

谢谢！

Answer 1

在.profile：hover类中添加position：relative，然后将鼠标悬停的图像始终与未悬停的图像重叠。

.profile:hover{
    position:relative;
    transform: scale(1.2);
 }

CSS和Bootstrap-如何获得悬停的图像以重叠其他图像

1 个答案: