Home > Blockchain >  Image aligning with hover transparency effect with css
Image aligning with hover transparency effect with css

Time：01-15

I would like to have these images on top of the title and that their size affects the size of the div they are in to work something like in this website: https://nomadgoods.com/collections/cases

I have managed to put a picture one above the other and make the hover function work but making that with "position: absolute;" will make it so that the images dont afect any othe elemets, Is there any way of having one on top of the other with no "position: absolute;" or that even if they use these the still will afect the rest of the elements.

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 >
                <!-- product section 1 -->
                    <div>
                        <!-- product containers -->
                        <div>
                        <div >

                            <!-- product box -->
                                <div >

                                    <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/" >
                                        <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/" >
                                    </div>
                                    
                                    <h3>Product name</h3>
                                    <p>Product specifications</p>
                                    <div  style="display: flex;">
                                        <button  style="background-color: black;"></button>
                                        <button  style="background-color: rgb(60,33,21);"></button>
                                        <button  style="background-color: rgb(105,77,59);"></button>
                                    </div>
                                </div>
                            <!-- product box end -->

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

CodePudding user response：

To solve this you can just set one element's position to absolute and the other's 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 >
                <!-- product section 1 -->
                    <div>
                        <!-- product containers -->
                        <div>
                        <div >

                            <!-- product box -->
                                <div >

                                    <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/" >
                                        <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/" >
                                    </div>
                                    
                                    <h3>Product name</h3>
                                    <p>Product specifications</p>
                                    <div  style="display: flex;">
                                        <button  style="background-color: black;"></button>
                                        <button  style="background-color: rgb(60,33,21);"></button>
                                        <button  style="background-color: rgb(105,77,59);"></button>
                                    </div>
                                </div>
                            <!-- product box end -->

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

CodePudding user response：

You are making position of both images to absolute this is causing the problem . Make one image absolute and position it above the other image. When you hover over image at the top disappears and image in the background become visible.

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 >
                <!-- product section 1 -->
                    <div>
                        <!-- product containers -->
                        <div>
                        <div >

                            <!-- product box -->
                                <div >

                                    <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/" >
                                           <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/" >
                                    </div>
                                    
                                    <h3>Product name</h3>
                                    <p>Product specifications</p>
                                    <div  style="display: flex;">
                                        <button  style="background-color: black;"></button>
                                        <button  style="background-color: rgb(60,33,21);"></button>
                                        <button  style="background-color: rgb(105,77,59);"></button>
                                    </div>
                                </div>
                            <!-- product box end -->

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

Page link：https//www.codepudding.com/Blockchain/672642.html

Prev:How to exclusively style parent or child when hovering over either of them?
Next:how can I draw this shape using CSS ::after and ::before?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding