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 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>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 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>