0

我连续有 7 张图片，每张图片都被标签包围。当我将鼠标悬停在其中一个图像上时，我在图像正上方有一个弹出块并居中。但是，此位置仅适用于我处于全屏状态时。当我调整窗口大小时，悬停弹出块不会保持与窗口全屏时相同的位置。当我通过调整窗口大小移动图像时，如何在图像上方居中弹出块的情况下保持原始位置？

@media only screen and (max-width: 576px) {
    .imgs {
        display: block;
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }
}

@media only screen and (min-width: 577px) {
    .imgs {
        display: block;
        border-radius: 50%;
        width: 60px;
        height: 60px;
    }
}

@media only screen and (min-width: 768px) {
    .imgs {
        display: block;
        border-radius: 50%;
        width: 80px;
        height: 80px;
    }
}

#userNames {
    text-align: center;
    font-size: 1.2vw;
}

#usersW {
    width: 14.2%;
    overflow: auto;
}

.showMore {
    display: block;
    width: max-content;
    font-size: 1.2vw;
}

.fonts {
    font-family: Impact, Charcoal, sans-serif;
    font-size: 3vw;
}


/* Hover effect on user profiles */

a .content {
    position: absolute;
    bottom: 125px;
    width: 300px;
    background: red;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    transform: translatex(-25%) translatey(-50px);
}

a .content:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    bottom: -10px;
    transform: rotate(45deg);
    left: 140px;
}

a:hover .content {
    visibility: visible;
    opacity: 1;
    transform: translatex(-25%) translatey(0px);
}
<div class="list-group-item clearfix mt-2 mr-2 mb-2 ml-0">
    <h1 class="ml-4 mt-1 mb-2 fonts">Users</h1>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div *ngFor="let user of users" id="usersW">

                        <a href="#">
                            <img [src]="user.profilePic" class="mx-auto my-1 p-1 imgs">
                            <p id="userNames">{{ user.name }}</p>
                            <div class="content">
                                <img [src]="user.imgPath[0]" class="mx-auto p-2 imgs">
                            </div>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="mx-auto mt-4 showMore">Show More</a>
</div>

4

1 回答 1

0

我希望这可以帮助你。

@media only screen and (max-width: 576px) {
    .imgs {
        display: block;
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }
}

@media only screen and (min-width: 577px) {
    .imgs {
        display: block;
        border-radius: 50%;
        width: 60px;
        height: 60px;
    }
}

@media only screen and (min-width: 768px) {
    .imgs {
        display: block;
        border-radius: 50%;
        width: 80px;
        height: 80px;
    }
}

#userNames {
    text-align: center;
    font-size: 1.2vw;
}

#usersW {
    width: 14.2%;
    overflow: auto;
}

.showMore {
    display: block;
    width: max-content;
    font-size: 1.2vw;
}

.fonts {
    font-family: Impact, Charcoal, sans-serif;
    font-size: 3vw;
}


/* Hover effect on user profiles */

a .content {

position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
    background: red;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
transform: translatex(-25%);
    
}

a .content:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    bottom: -10px;
    transform: rotate(45deg);
    left: 140px;
}

a:hover .content {
    visibility: visible;
    opacity: 1;
transform: translatex(0%);
    
}
<div class="list-group-item clearfix mt-2 mr-2 mb-2 ml-0">
    <h1 class="ml-4 mt-1 mb-2 fonts">Users</h1>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div *ngFor="let user of users" id="usersW">

                        <a href="#">
                            <img [src]="user.profilePic" class="mx-auto my-1 p-1 imgs">
                            <p id="userNames">{{ user.name }}</p>
                            <div class="content">
                                <img [src]="user.imgPath[0]" class="mx-auto p-2 imgs">
                            </div>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="mx-auto mt-4 showMore">Show More</a>
</div>

于 2020-06-11T15:37:06.647 回答