Achieve image alignment with a sleek hover transparency effect using CSS

I am looking to have these images positioned on top of the title and for their size to impact the size of the container they are in, similar to how it works on this website:

I have successfully stacked the images one above the other and implemented the hover effect but using "position: absolute;" prevents the images from affecting any other elements on the page. Is there a way to stack them without using "position: absolute;" or at least make sure they still influence the rest of the elements even with that property?

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>

htmlcssvisual-web-developer

Answer №1

In order to address this issue, simply assign one element's position as absolute and the other as 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>

Answer №2

To resolve the issue, adjust the position of the images by making one absolute and placing it above the other. This way, when you hover over the top image, it disappears, revealing the background image.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message for empty input is not being displayed upon submission in Bootstrap validation

I've been attempting to implement Bootstrap validation in a form with the following desired outcome: Upon submission of the form, if the "First name" field is left empty, a message saying "Please enter a name" should appear below the field. If the f ...

javascripthtmlbootstrap-4

Counting checkboxes in jQuery version 1.9

I recently upgraded my website from jQuery 1.6 to jQuery 1.9.1, and now some of my old code is not working as expected. Specifically, I have a piece of code that handles checkboxes in table rows, allowing only up to 5 checkboxes to be active at once and di ...

javascriptjqueryhtmlcheckbox

Excessive Expansion of Website Width

Initially, I crafted a website on my local server, and it had the ideal width. Afterwards, I uploaded it to the live server and made some design modifications. To my surprise, there is now an unexpected scroll bar at the bottom of the page, causing the s ...

jqueryhtmlcss

Seamless Gradient Transition Effect on SVG Hover

I am facing an issue with the transition of a linear gradient in an SVG hover effect. The gradient itself is working fine, but I'm struggling to apply a smooth transition to my path. PS: I would like to achieve this effect using only one path, withou ...

htmlcsssvgtransition

Customizable dropdown menu design using HTML and CSS

Hello everyone, this is my very first post on Stack Overflow and I'm a bit unsure about the rules regarding posting. Please feel free to point out any mistakes I may have made. I've searched through the forums but haven't found a clear answe ...

htmlcssdropdown

Get rid of the Bootstrap 4 button outline Mixin

I'm feeling a bit stuck on how to tackle this challenge. My goal is to create a sass mixin that eliminates the default blue Bootstrap outline present on buttons. This way, I can easily apply it to specific buttons as needed. If anyone could offer so ...

csstwitter-bootstrapsassbootstrap-4twitter-bootstrap-4

Expand the width of the image gradually until it reaches its initial size within a flexible DIV container

I am working with a <div> container that occupies 80% of the screen on a responsive page. Within this <div>, I am attempting to display an image that is sized at 400 x 400 pixels. My objective: As the screen width increases: The <div> ...

javascripthtmlcssimage

Monitor the incoming POST request

Is there a way to monitor incoming post requests in a form? I have the following form: <form method='post'> <input type='text' name'test' /> <input type='submit' name'submit' /> </for ...

phphtmlforms

"Discover a unique online platform showcasing videos and images with a creative

I recently updated my personal website to showcase some of the tools I've developed through short looping videos. Initially, everything was working well with just images, but when I switched to videos, I encountered some unexpected behaviors. Interest ...

htmlcss

Remove interactive data tables from the onclick event

I have a dynamically rendered DataTable from https://datatables.net. I implemented an on-click event for the rows based on this tutorial: https://datatables.net/examples/advanced_init/events_live.html In the row, there is a select box that I excluded by ...

jqueryhtmlcssdatatabledatatables

Tips on how to ensure a JAVA application opens a webpage in a designated browser

Adding the microsoft-edge prefix to a URL (microsoft-edge:) will open the page in Edge, regardless of the browser being used for running the app. I am wondering if there is an equivalent prefix for Chrome and Firefox? Thank you in advance. ...

javascriptjavahtmlgoogle-chromeweb

Thumbnail display issue in jQuery Galleria

After successfully setting up the Galleria Plugin, I found that the thumbnails for each picture were not generating. Here is my code: <div id="galleria"> <img title="Image title" src="images/1.jpg"> ...

phpjavascriptjqueryhtmlcss

The setInterval function does not function properly in IE8 when set to 0

I have a function called changeColor that updates the styling of certain elements in my HTML. In order to apply this function, I am using a timer like so: var timer = setInterval(changeColor,0); The issue I am encountering is that setting the time interv ...

javascripthtmlcssinternet-explorer-8

Is there a table that allows users to input percentages?

Looking for help with a table that has 2 columns: "Activities" and "Average % of Time". Users need to input a % value for each activity in the "Average % of Time" column. There are 7 rows for activities. The goal is to ensure that the sum of the % values f ...

javascripthtml

Utilize information stored in a database to automatically navigate to a different webpage

I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...

javascriptphphtmlmysqlcss

django is not able to load staticfiles from the statifiles_dirs directory

I have placed my style.css in the directory appname/static/appname/. In my settings.py, this is what I have: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static/"), ) When I try to load it in my base.html like t ...

pythoncssdjangostylesdjango-staticfiles

SwipeJS is not compatible with a JQuery-Mobile web application

I am currently attempting to integrate SwipeJS (www.swipejs.com) into my JQuery-Mobile website. <script src="bin/js/swipe.js"></script> <style> /* Swipe 2 required styles */ .swipe { overflow: hidden; ...

javascriptjqueryhtmlcssjquery-mobile

Issues with the alignment of items in an item grid in CSS/HTML are causing the display to appear

I am experiencing an issue with the CSS formatting of a section on my website. The products in the product grid do not display properly in order when the screen size is too small. For instance, if you visit this specific site: and view it on a screen lar ...

htmlcssmagento

How can you use JQuery to create a fading effect on colors while keeping the boxes stationary?

I have designed a grid of 16x16 boxes. When you hover your mouse over a box, it turns pink. However, I want the box to remain visible when you move away from it, with the pink color gradually fading back to the original gray after a second. Here is the HT ...

javascriptjqueryhtmlcss

Setting the Minimum Width of Floating Columns in HTML and CSS

Can anyone provide some assistance? I am currently using a design that I want to modify so that the columns do not compress or shrink below a certain size. I have attempted to use "min-width" without success. Any help would be greatly appreciated. Thank y ...

csshtmlmultiple-columnsfloating