1

I was wondering of a way to remove the issue of images that are adjacent with the hovered image in my code (notice when you hover it sometimes overlaps and sometimes is overlapped by a non-hovered image). I want the hovered image to always overlap.

Here is the codepen link: 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);
}

Thanks!

Dante Grieco
  • 11
  • 2
  • 1
    Possible duplicate of [z-index is canceled by setting transform(rotate)](https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate) – Obsidian Age Oct 11 '18 at 02:10

1 Answers1

0

Add position:relative in .profile:hover class then hovered image will always overlap on non hovered images.

.profile:hover{
    position:relative;
    transform: scale(1.2);
 }
TayabRaza
  • 51
  • 4
  • Okay I understand that, however, how do I get it to remain relative until the resize down fully ends its animation. – Dante Grieco Oct 12 '18 at 05:16