用css实现悬停透明效果的图像对齐

lx0bsm1f  于 2023-01-18  发布在  其他
关注(0)|答案(2)|浏览(112)

我想有这些图像的标题顶部，他们的大小影响的div的大小，他们在工作的东西像在这个网站：https://nomadgoods.com/collections/cases
我已经设法把一张图片放在另一张上面，使悬停功能工作，但使与"位置：绝对;"将使图像不影响任何其他元素，是否有任何方法使一个在另一个之上，而没有"位置：绝对的;"或者即使他们使用这些，仍然会影响其余的元素。

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: auto;
}
  
body {
    margin: 0px;
    -webkit-font-smoothing: antialiased;
    background: #f2f2f2;
    color: #000;
    font-family: Gotham-Bold,sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.5;
}

.nav {
    width: 100%; 
    min-height: 60px; 
    max-height: 60px;
    border: 0px;

    position: absolute;
    justify-content: top;
}

.banner-box {
    margin-top: 0px;
    width: 100%;
    height: 100%;
    max-height: 550px;
    min-height: 200px;
    max-width: auto;
    min-width: 768px;

    background-image: url(assets/img/Desktop_1.jpg);

    background-position: var(--backgroundPosition);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    /* Title alignment*/
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: auto;
    padding-bottom: 10px;
}
.banner-title {
    font-family: Gotham-Bold,sans-serif;
    font-size: 78px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 0.3px;
    text-align: center;
}
.banner-subtitle {
    font-family: Gotham-Bold,sans-serif;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1;
    text-align: center;
}

.body-w { 
    margin-left: 5%;
    margin-right: 5%;
}

/* Product section */
.product-container  {
    margin-left: 2.5%;
    margin-right: 2.5%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-container *{
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;

}
.product-box {
    max-width: auto;
    min-width: 150px;
    
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    position: relative;

    overflow: hidden;
}
.product-img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #f3f3f3;
    transition: opacity .3s ease;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}
.product-img.is-visible {
    opacity: 1;
    z-index: 1;
}
.product-img.is-visible:hover{
    opacity: 0;
    z-index: 2;
}

.color-container *{
    margin-left: 1px;
    margin-right: 1px;
}
.product-color {
    min-height: 20px;
    min-width: 20px;

    border: 2.5px;
    border-style: solid;
    border-color: #c1c1c1;

    border-radius: 15px;
}
<html lang="en">
    <head>
        <!-- meta data -->
            <meta name="author" content="Rafa Ponce Vivancos">
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- meta data end -->
        <title>Testing</title>
        <link href="css/testing.css" rel="stylesheet">
    </head>
    <body>
        <!-- Body-->    
            <div class="body-w">
                <!-- product section 1 -->
                    <div>
                        <!-- product containers -->
                        <div>
                        <div class="product-container">

                            <!-- product box -->
                                <div class="product-box">

                                    <div>
                                        <img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img is-visible">
                                        <img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
                                    </div>
                                    
                                    <h3>Product name</h3>
                                    <p>Product specifications</p>
                                    <div class="color-container" style="display: flex;">
                                        <button class="product-color" style="background-color: black;"></button>
                                        <button class="product-color" style="background-color: rgb(60,33,21);"></button>
                                        <button class="product-color" style="background-color: rgb(105,77,59);"></button>
                                    </div>
                                </div>
                            <!-- product box end -->

                        </div>
                    </div>
                </div>
            </div>    
    </body>
</html>
css

2条答案

按热度按时间
zujrkrfu

zujrkrfu1#

要解决这个问题，只需将一个元素的位置设置为absolute，另一个元素的位置设置为relative。

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: auto;
}
  
body {
    margin: 0px;
    -webkit-font-smoothing: antialiased;
    background: #f2f2f2;
    color: #000;
    font-family: Gotham-Bold,sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.5;
}

.nav {
    width: 100%; 
    min-height: 60px; 
    max-height: 60px;
    border: 0px;

    position: absolute;
    justify-content: top;
}

.banner-box {
    margin-top: 0px;
    width: 100%;
    height: 100%;
    max-height: 550px;
    min-height: 200px;
    max-width: auto;
    min-width: 768px;

    background-image: url(assets/img/Desktop_1.jpg);

    background-position: var(--backgroundPosition);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    /* Title alignment*/
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: auto;
    padding-bottom: 10px;
}
.banner-title {
    font-family: Gotham-Bold,sans-serif;
    font-size: 78px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 0.3px;
    text-align: center;
}
.banner-subtitle {
    font-family: Gotham-Bold,sans-serif;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1;
    text-align: center;
}

.body-w { 
    margin-left: 5%;
    margin-right: 5%;
}

/* Product section */
.product-container  {
    margin-left: 2.5%;
    margin-right: 2.5%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-container *{
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;

}
.product-box {
    max-width: auto;
    min-width: 150px;
    
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    position: relative;

    overflow: hidden;
}
.product-img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #f3f3f3;
    transition: opacity .3s ease;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0;
}
.product-img:not(.is-visible) {
    position: absolute;
}
.product-img.is-visible {
    display: block;
    opacity: 1;
    position: relative;
    z-index: 1;
}
.product-img.is-visible:hover{
    opacity: 0;
}

.color-container *{
    margin-left: 1px;
    margin-right: 1px;
}
.product-color {
    min-height: 20px;
    min-width: 20px;

    border: 2.5px;
    border-style: solid;
    border-color: #c1c1c1;

    border-radius: 15px;
}
<html lang="en">
    <head>
        <!-- meta data -->
            <meta name="author" content="Rafa Ponce Vivancos">
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- meta data end -->
        <title>Testing</title>
        <link href="css/testing.css" rel="stylesheet">
    </head>
    <body>
        <!-- Body-->    
            <div class="body-w">
                <!-- product section 1 -->
                    <div>
                        <!-- product containers -->
                        <div>
                        <div class="product-container">

                            <!-- product box -->
                                <div class="product-box">

                                    <div>
                                        <img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
                                        <img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img is-visible">
                                    </div>
                                    
                                    <h3>Product name</h3>
                                    <p>Product specifications</p>
                                    <div class="color-container" style="display: flex;">
                                        <button class="product-color" style="background-color: black;"></button>
                                        <button class="product-color" style="background-color: rgb(60,33,21);"></button>
                                        <button class="product-color" style="background-color: rgb(105,77,59);"></button>
                                    </div>
                                </div>
                            <!-- product box end -->

                        </div>
                    </div>
                </div>
            </div>    
    </body>
</html>
赞(0）分享  回复(0）举报  2023-01-18
wlp8pajw

wlp8pajw2#

您正在将两个图像的位置都设置为绝对，这导致了问题。请将一个图像设置为绝对，并将其放置在另一个图像上方。当您将鼠标悬停在上面时，顶部的图像将消失，而背景中的图像将变为可见。

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: auto;
}
  
body {
    margin: 0px;
    -webkit-font-smoothing: antialiased;
    background: #f2f2f2;
    color: #000;
    font-family: Gotham-Bold,sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.5;
}

.nav {
    width: 100%; 
    min-height: 60px; 
    max-height: 60px;
    border: 0px;

    position: absolute;
    justify-content: top;
}

.banner-box {
    margin-top: 0px;
    width: 100%;
    height: 100%;
    max-height: 550px;
    min-height: 200px;
    max-width: auto;
    min-width: 768px;

    background-image: url(assets/img/Desktop_1.jpg);

    background-position: var(--backgroundPosition);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    /* Title alignment*/
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: auto;
    padding-bottom: 10px;
}
.banner-title {
    font-family: Gotham-Bold,sans-serif;
    font-size: 78px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 0.3px;
    text-align: center;
}
.banner-subtitle {
    font-family: Gotham-Bold,sans-serif;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1;
    text-align: center;
}

.body-w { 
    margin-left: 5%;
    margin-right: 5%;
}

/* Product section */
.product-container  {
    margin-left: 2.5%;
    margin-right: 2.5%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-container *{
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;

}
.product-box {
    max-width: auto;
    min-width: 150px;
    
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    position: relative;

    overflow: hidden;
}
.product-img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #f3f3f3;
    transition: opacity .3s ease;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: relative;
    top: 0;
    left: 0;
}
.main-image
{
position:absolute;
  margin-top:6.5%;
  margin-left:4%;
}
.product-img.is-visible {
    opacity: 1;
    z-index: 1;
}
.product-img.is-visible:hover{
    opacity: 0;
    z-index: 2;
}

.color-container *{
    margin-left: 1px;
    margin-right: 1px;
}
.product-color {
    min-height: 20px;
    min-width: 20px;

    border: 2.5px;
    border-style: solid;
    border-color: #c1c1c1;

    border-radius: 15px;
}
<html lang="en">
    <head>
        <!-- meta data -->
            <meta name="author" content="Rafa Ponce Vivancos">
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- meta data end -->
        <title>Testing</title>
        <link href="css/testing.css" rel="stylesheet">
    </head>
    <body>
        <!-- Body-->    
            <div class="body-w">
                <!-- product section 1 -->
                    <div>
                        <!-- product containers -->
                        <div>
                        <div class="product-container">

                            <!-- product box -->
                                <div class="product-box">

                                    <div>
                                     
                                        <img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
                                           <img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img main-image is-visible">
                                    </div>
                                    
                                    <h3>Product name</h3>
                                    <p>Product specifications</p>
                                    <div class="color-container" style="display: flex;">
                                        <button class="product-color" style="background-color: black;"></button>
                                        <button class="product-color" style="background-color: rgb(60,33,21);"></button>
                                        <button class="product-color" style="background-color: rgb(105,77,59);"></button>
                                    </div>
                                </div>
                            <!-- product box end -->

                        </div>
                    </div>
                </div>
            </div>    
    </body>
</html>
赞(0）分享  回复(0）举报  2023-01-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com