CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements?

For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on the .non-reflective element (which is placed in the center):

  .bg
  {
      position: relative;
      width: 300px;
      height: 150px;
      background-color: green;
  }
  .reflective
  {
      width: 100%;
      background-image: url(https://sample.wdd.co.il/wp-content/uploads/sites/6/2024/01/mahogany-4.jpg);
      height: 45px;
      margin: 2.5px 0;
      border: 1px solid gray;
      border-radius: 15px;
      box-shadow: inset 0 0 10px black;
  }
  .non-reflective
  {
      width: 100%;
      background-color: transparent;
      height: 50px;
      border: 1px solid brown;
      border-radius: 15px;
  }
  .reflection
  {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 250px;
      height: 150px;
      border-radius: 100%;
      background: linear-gradient(to bottom right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
  }
<div class="bg">
    <div class="reflective"></div>
    <div class="non-reflective"></div>
    <div class="reflective"></div>
    <div class="reflection"></div>
</div>

javascripthtmlcss

Answer №1

Perhaps this solution can be of assistance, focusing on a portion of the image and background positioning.

 .bg {
        position: relative;
        width: 300px;
        height: 150px;
        background-color: green;
        margin: 50px 0;
      }
      .bg2 {
        position: relative;
        background-image: url(https://sample.wdd.co.il/wp-content/uploads/sites/6/2024/01/mahogany-4.jpg);
        background-size: 300px 150px;
        width: 300px;
        height: 150px;
        margin: 50px 0;
      }
      .reflective {
        width: 100%;
        background-image: url(https://sample.wdd.co.il/wp-content/uploads/sites/6/2024/01/mahogany-4.jpg);
        background-size: 300px 150px;
        height: 45px;
        margin: 2.5px 0;
        border: 1px solid gray;
        border-radius: 15px;
        box-shadow: inset 0 0 10px black;
        background-position: 0 0;
        overflow: hidden;
      }
      .reflective div {
        background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        border-radius: 100%;
        overflow: hidden;
        width: 100%;
        height: 150px;
      }
      .reflective2 {
        background-position: 0 200px;
        overflow: hidden;
      }
      .reflective2 div{
        background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        margin-top: -100px;
        border-radius: 100%;
        width: 100%;
        height: 150px;
      }
      .non-reflective {
        width: 100%;
        background-color: transparent;
        height: 50px;
        border: 1px solid brown;
        border-radius: 15px;
        z-index: 10;
        position: relative;
      }
      .reflection {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 250px;
        height: 150px;
      }
<p>section of the image</p>
    <div class="bg">
      <div class="reflective"><div></div></div>
      <div class="non-reflective"></div>
      <div class="reflective reflective2"><div></div></div>
      <div class="reflection"></div>
    </div>
    <p>the entire image</p>
    <div class="bg2"></div>

Answer №2

To achieve this effect, you can utilize the z-index property in combination with the position property. Additionally, adding another element with the class of non-reflective-inner can help ensure that the reflection does not show on the outside or border.

.bg {
  position: relative;
  width: 300px;
  height: 150px;
  background-color: green;
}

.reflective {
  width: 100%;
  background-image: url(https://sample.wdd.co.il/wp-content/uploads/sites/6/2024/01/mahogany-4.jpg);
  height: 45px;
  border: 1px solid gray;
  border-radius: 15px;
  box-shadow: inset 0 0 10px black;
}

.non-reflective {
  width: 100%;
  z-index: 2;
  position: relative;
  background-color: inherit;
  padding: 2.5px 0;
}

.non-reflective-inner {
  height: 50px;
  border: 1px solid brown;
  border-radius: 15px;
}

.reflection {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 250px;
  height: 150px;
  border-radius: 100%;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}
<div class="bg">
    <div class="reflective"></div>
    <div class="non-reflective">
      <div class="non-reflective-inner"></div>
    </div>
    <div class="reflective"></div>
    <div class="reflection"></div>
</div>

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

Generating duplicate uuidv4 key values within a Sequelize model

Hello, I'm new to TypeScript and Express. I've set up a UUID type attribute but it always returns the same value. 'use strict'; const { v4: uuidv4 } = require('uuid'); const { Model, Sequelize } = require('sequelize&apo ...

javascriptnode.jsexpresssequelize.jsuuid

My HTML and CSS design is not displaying correctly on mobile devices

Currently, I am in the process of utilizing a free website template. However, I am facing an issue with adjusting the background image. Is there anyone who can provide some guidance on resolving this particular problem? I would be happy to share the code ...

htmlcssmobile

Securing access across multiple routes in a React application

I am facing a challenge in my React app where I need to verify the logged-in state before allowing access to multiple routes. Despite consulting various resources like Stack Overflow for solutions such as creating a Private Route, I have only found example ...

javascriptreactjs

The JSON file containing API data is stored within the _next folder, making it easily accessible to anyone without the need for security measures or a login in the Next

When accessing the protected user Listing page, we utilize SSR to call the api and retrieve all user records which are then rendered. However, if one were to check the Network tab in Chrome or Firefox, a JSON file containing all user data is generated and ...

javascriptreactjsnext.js

After the ajax request is made in React JS, the column vanishes from the screen

Upon querying a node.js server's PostgreSQL database, I receive specific data that needs to be displayed in two separate tables. Each table consists of two columns. However, after the AJAX call, only the first column is being populated in the first ta ...

javascriptjqueryajaxreactjs

Start fresh with your list styling in Sass/CSS

I'm attempting to revert ul and li elements to their default styles using a specific class, but I'm encountering difficulties in doing so. I've experimented with the inherit and initial values, but they haven't proven effective. This i ...

htmlcsssasslessstylesheet

The React.js project I created is showcased on GitHub pages and has a sleek black design

After developing a project using React.js and deploying it on github pages, everything was functioning smoothly. However, I encountered an issue where the screen turned black after logging in and out multiple times. Are there any suggestions on how to reso ...

javascriptreactjsjsongithubgithub-pages

Import and load numerous JSON files into a responsive and visually appealing Bootstrap table

I am new to coding in javascript and I'm seeking assistance in loading multiple JSON files to populate a bootstrap table. Currently, I've managed to create a table by manually combining the content from different files into one variable called l ...

javascriptjsonbootstrap-table

Transforming varied JavaScript objects into a serial form

In my application, there is a concept of an interface along with multiple objects that implement this interface in various ways. These objects are created using different factory methods, with the potential for more factories to be added as the application ...

javascriptjsonpolymorphism

Tips for detecting HTML updates using Python requests

My goal is to monitor a page for updates while maintaining the same session and cookies, without sending a completely new request. How can I determine if there are HTML updates within my current request? The page will redirect but keep the same URL. This ...

pythonhtmlhttppython-requestspython-requests-html

Images are not appearing correctly on Chrome browsers when using Windows operating system

img tags seem to have unusual margins in Chrome, Edge, and Opera browsers, while Firefox displays them correctly. Queries What is causing these margins specifically in Chrome? The Devtool does not detect any margin properties. Is there a straightforward s ...

htmlcssgoogle-chromefirefoxwindows-11

Using Reactjs to automatically populate text into a React-Select Input field

I have implemented react-select in my project. Sometimes, I encounter the need to update my react-select input field without directly interacting with it (such as injecting text into it). However, I am unable to find a proper way to achieve this based on ...

javascriptjquerynode.jsreactjsreact-select

When the window is resized, the div shifts position

I recently added a div to my website with the following code: <div id="div"></div> #div { height: 400px; width: 300px; position: absolute; right: 59%; text-align: left; } Howe ...

htmlcss

Tips for keeping data on a page up-to-date using Node.js and Express

Currently delving into the world of Node.js and Express, I am immersed in a project that involves pinging websites and exhibiting the results on a web page. Leveraging HoganJS for templating as well. My primary focus is to decipher the steps necessary to m ...

javascriptnode.jsexpresshogan.js

Nested Promises in Angular's $q Library

I'm facing an issue with a function that should return a list of favorite locations. Here's the code snippet in question: When I call LocationsFactory.getFavoriteLocations(), it returns a promise like this: getFavoriteLocations: function() { ...

javascriptangularjs

When using window.open in Chrome on a dual screen setup, the browser will bring the new window back to the

When using the API window.open to open a new window with a specified left position in a dual screen setup (screen1 and screen2), Chrome behaves differently than IE and FF. In Chrome, if the invoking screen is on the right monitor, the left position always ...

javascripthtml

Discovering the current time and start time of today in EST can be achieved by utilizing Moment.js

Need help with creating Start and End Time stamps using Moment.js in EST: Start Time should reflect the beginning of today End Time should show the current time. This is how I have implemented it using moment.js: var time = new Date(); var startTime=D ...

javascriptnode.jstimezonemomentjs

Utilizing jQuery to eliminate a script function from an external webpage

Currently, I am utilizing a ColdFusion script to load an external page within the container tag. This external page contains a sorting function defined as: function sorting(sortid). However, this function's sorting criteria constantly leads to errors ...

javascriptjqueryhtml

Utilize Protractor Selenium to extract content from a popup window

Having trouble capturing the text from a popup using Protractor with getText? The HTML structure can be found here. This popup only appears for a few seconds before disappearing. Can anyone assist me in retrieving the text from this popup? To retrieve the ...

javascriptselenium-webdriverprotractor

Steps to bring life to your JavaScript counter animation

I need to slow down the counting of values in JavaScript from 0 to 100, so that it takes 3 seconds instead of happening instantly. Can anyone help me with this? <span><span id="counter"> </span> of 100 files</span> <s ...

javascripthtml