Tips for placing half of an element in the background

I'm in the process of creating a bootstrap website and I need to have one part of an element visible while the other part is hidden behind another element, similar to the image. How can I achieve this effect?

HTML 
<section class="about">
        <img src="img/about-el-img.png" class="about-el-img">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-5 offset-xl-1">
                    <h2 class="about-title">Сервис обмена электронных
                    валют с 5-летней историей</h2>
                    <p class="about-desc">За время работы мы приобрели репутацию проверенного партнера и 
                    делаем все возможное, чтобы ваши впечатления от нашего сервиса были только 
                    благоприятными.</p>
                </div>
                <div class="col-xl-6">
                    <img src="img/about-img.png" class="about-img" alt="Image">
                </div>
            </div>
        </div>
</section>

CSS
.about
    position: relative
    .about-el-img
        position: absolute
        top: 0
        left: 220px
    .container
        border: 4px solid #F7F8FD
        border-radius: 26px
        padding-bottom: 88px
    &-img
        max-width: 100%
    &-title
        font-weight: 500
        font-size: 35px
        line-height: 132.4%
        color: #160647
        padding: 102px 0 30px
        max-width: 320px
    &-desc
        font-size: 18px
        line-height: 166.5%
        opacity: 0.7
        color: $main-text
        max-width: 400px
htmlcssfrontendz-index

Answer №1

To achieve this effect, you can utilize the z-index property in CSS:

.profile{
      position:relative
   }
.profile-image{ 
       position:absolute
   }
.container{
       position:absolute
       z-index:1
   }

If you prefer to display the image above and the container below, simply apply z-index:1 to .profile-image. This technique is commonly referred to as stacking in CSS.

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

Verify if the button is assigned a specific class, then generate a 'completed' div

I'm new to working with Jquery and I have a question. In my upload form, when something is uploaded the upload-button changes class from: <a class="upload-button upload buy" id="upload-button"><span>Upload a document</span></a> ...

javascriptjqueryvalidationhtml

Using Selenium to extract the innerHTML of elements situated beneath other elements

My goal is to extract specific li tags from a page that requires continuous scrolling to load new ones. The HTML structure is as follows: <div> <ul> <li> INFO_1 </li> <li> INFO_2</li> ...

pythonhtmlseleniumweb-scraping

Navigating child elements inside a parent container: A guide

Having trouble targeting the correct element in CSS. How can I get .sizewave to target both itself and .bp_bar? Any solutions? HTML: <div class="bp_outer_wrapper"> <img class="sizewave" src="media/images/heart.svg"> <div class="b ...

htmlcssanimationcss-selectorsparent

How can one generate an HTML element using a DOM "element"?

When extracting an element from an HTML page, one can utilize a DOM method like .getElementById(). This method provides a JavaScript object containing a comprehensive list of the element's properties. An example of this can be seen on a MDN documentat ...

javascripthtmldom

Problem with displaying fonts in web browsers

I decided to create a React App using the Material UI library, but I wanted to customize it by changing the default font from Roboto to Overpass. I successfully imported the fonts using their library. <link rel="preconnect" href="https:// ...

htmlcssreactjsmaterial-uigoogle-fonts

The jQuery notification box fails to appear on the screen

I am attempting to showcase a popup box from a div using the following code. Despite successfully adding a record, the div does not show up. I have experimented with $("#div").html. Script: <script src="scripts/jquery-1.11.1.min.js "></script&g ...

javascriptjqueryhtmlcss

"A problem with PrimeNG where the model value does not get updated for the p-auto

<p-autoComplete [style]="{'width':'100%'}" name="searchSuggestions" [(ngModel)]="suggestion" (completeMethod)="searchSuggestions($event)" [suggestions]="searchSuggestionsResult" field="field"></p-autoComplete> Utilizing t ...

htmlangular

Positioning the icon within the input field

I am facing a couple of challenges. I have chosen to utilize focus and blur for text values in input fields instead of placeholder text due to an issue in Chrome where the placeholder text is centered. My goal is to position the icon in the input field, p ...

cssiconsalignment

Retrieve information from a variety of selected checkboxes

Is there a way to retrieve the values of check boxes that are generated dynamically? @ $db = mysql_connect("abc", "abc", ""); mysql_select_db("abc"); $strSQL = "SELECT * FROM student"; ...

phpjavascripthtmlajaxforms

Tips for shifting text from the first column to the second column after completing the content in the first

Is there a way to continue text in the second column after filling up the first column vertically? I experimented with white space but it didn't work. Any suggestions? <!DOCTYPE html> <html lang="en"> <head> <title> ...

htmlcssbootstrap-4flexboxoverflow

The div inside the scrollable container fails to adjust to the width of its content

This issue presents a unique challenge: there is a scrollable div containing another div, both with background images featuring transparency. The content within the inner div exceeds the width of its container, causing scrolling to occur. However, the inne ...

htmlcss

What is the significance of an HTML form entry containing "action='something'"?

While reviewing a HTML file, I stumbled upon the following entry: '<form action="?" ... ' Despite my efforts to decipher its purpose, I am unable to comprehend it. I attempted to search for answers on Google, but unfortunately, no relevant r ...

htmlforms

What is the reason that the check box does not appear when <Table/> is rendered multiple times?

Utilizing the <Table/> component from http://www.material-ui.com/#/components/table, I am facing an issue where the checkboxes do not appear when rendering multiple instances of <TableRowColumn/>, corresponding to the number of objects in the a ...

javascripthtmlreactjsmaterial-ui

Creating a set width for the input-group-append division in Bootstrap 4

I am currently utilizing the power of Bootstrap 4's input group feature to position an icon next to an input field. My goal is to set a fixed width of 40px for the div containing the input-group-append (which houses the icon). According to the offici ...

csstwitter-bootstrapflexboxbootstrap-4

Having trouble accessing Blockly methods in index.html, despite functioning properly in other .js files where the workspace is displayed

Currently, I'm in the process of developing a unique tool that allows users to create HTML pages using Blockly blocks. Despite successfully setting up a workspace with my custom block, I am encountering issues when attempting to extract code from the ...

javascripthtmlblocklygoogle-blockly

I'm struggling to position the four divs in each of the two rows similar to the example provided. Can anyone help me figure this

I need help figuring out how to position 4 divs in a row so that when one is clicked and expands with additional information, it pushes the bottom div down. All 8 divs have the same class. I attempted using display: inline-block, but all the lower 4 divs m ...

javascripthtmlcsswordpress

Can styles be added using script code?

A kind member from this site has assisted me in fixing a script. This initial segment of the code allows for the categorization and separation of blog articles by tags. Is it feasible to incorporate CSS into this section of the code, where the tags Terro ...

javascriptjqueryhtmlcss

Ways to create a cool visual effect by making the CSS shadow cover the content

This component may seem simple at first glance. The main div with the ID 'main' features a shadow property, while a second div with the ID 'sub' contains an array of interactive elements (buttons, dropdowns, etc., although the code exam ...

cssreactjstailwind-cssshadow

Delay Time for Closing Sub Menus When Multiple Dropdowns are Opened

My issue involves a multi-level drop-down menu that is solely constructed using CSS. The problem I am facing is that there is a delay of one second before the drop-down closes when the mouse is moved away. This delay causes multiple drop-down menus to stac ...

javascriptjqueryhtmlcssdropdown

HTML and Javascript Form Integration for Sage Pay Purchase Button

Currently, I am working on a project that includes online payment options via PayPal and Google Wallet, with a "buy now" button. Now, my next step is to incorporate the Sage Pay "buy now" button onto the website using HTML and JavaScript. Although I have ...

javascripthtmlopayo