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

Navigate to a particular section in the webpage

There are a few div elements with the class .posts that each have an attribute data-id which corresponds to the ID in a MySQL database. <div class="posts" data-id="1"></div> <div class="posts" data-id="2"></div> If I want to scrol ...

javascriptjqueryhtmlscroll

Saving base64 encoded pdf on Safari

I am facing an issue with a POST call that returns a base64 PDF. The problem arises when trying to convert it to a Blob and download it using Safari browser. This method works perfectly in all other browsers. openPdf = () => { const sendObj = { ...

javascriptpdfsafari

Quick inquiry about referencing state variables in the render method in React Native

Initially, I assumed it was just a simple syntax error, but now I'm beginning to think that it might be related to a bigger concept concerning hierarchy and inheritance. I am currently working on an app in react native (expo) where I aim to display a ...

javascriptreactjsreact-nativemapsexpo

Is it necessary to use JS/JQ to trigger PHP form data?

Can PHP files/functions be executed without reloading the page? It can be quite disruptive when developing a chat app and every time you send a message, the entire page refreshes. I attempted to use AJAX but it didn't work. Is it not possible to send ...

javascriptphpjqueryajax

What are the steps to resolve an invalid token error when receiving it? (repl.it)

Today marks my introduction to node.js, recommended by a friend. Due to limited resources, I have opted to utilize repl.it for hosting. However, I am faced with an error in my first attempt at using it. The purpose of my current script is to make my user ...

javascriptnode.jsdiscord.js

Output Scalable Vector Graphics (SVG) content on a webpage

I need to include an SVG element in my Angular 2+ code. My goal is to provide users with the option to print the SVG element as it appears on the screen. <div class="floor-plan" id="printSectionId2" (drop)="onDrop($event)" (dragover)="onDragOver ...

javascripthtmlcsstypescriptsvg

difficulties with struts2 user interface elements

Can anyone explain why the s:textfield is being positioned at the bottom when inserted among other HTML elements within a form? And what steps can be taken to resolve this issue? <label><span class="required">*</span>First name</label ...

htmlcssstruts2

Customizing the input placeholder for password fields in IE8 using jQuery

Currently, I have opted to use jQuery instead of the HTML5 placeholder attribute <input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this. ...

javascriptjquerycsshtml

Do you know where I can locate the HTML and CSS pertaining to the search results page

I'm looking for a way to present search results on my website that resembles the Google search results, creating a familiar interface for users. Is there anyone who knows where I can obtain the HTML and CSS code that produces the same style as Google& ...

htmlcssstyles

React Native images failing to render at the same time

I have created a React Native app that loads images simultaneously from Supabase storage using a custom hook. The goal is to display these images in a list using SwipeListView: const fetchImages = async (recipes) => { if (!recipes) { return; ...

javascriptreactjsreact-nativesupabasereact-native-paper

Issue with Material-UI Dialog Reusable Component: No error messages in console and app remains stable

Here is a component I've created for reusability: import { Dialog, DialogContent, DialogContentText, DialogTitle, Divider, Button, DialogActions, } from "@mui/material"; const Modal = ({ title, subtitle, children, isOpen, hand ...

javascriptreactjsmaterial-ui

Tips for updating VUE's main.js file to incorporate the routers/index.js configuration

What is the reason for the difference in syntax between the VUE UI main.js code generated by CLI/3 and the older version, and how does it function? What are the various components of the new syntax and how do they work? sync(store, router) // for vuex-rou ...

javascriptvue.jsecmascript-6vuexvue-cli-3

Can Selenium be executed from a <py-script> within an HTML file?

prefs = webdriver.ChromeOptions() prefs.add_experimental_option("detach", True) driver = webdriver.Chrome(ChromeDriverManager().install(), options=prefs) Following this code, it seems to stop running (It runs fine in a .py file so I believe all ...

htmlseleniumpyscript

"Unlocking the power of Webdriver.io: Sending information to a personalized reporting system

Utilizing the wdio tool provided by the webdriver.io npm package is how I execute Mocha test-cases. The snippet below showcases a segment of the wdio.conf.js file: var htmlReporter = require('./js/reporter/htmlReporter'); htmlReporter.reporterN ...

javascriptnode.jsselenium-webdrivermocha.jswebdriver-io

Tips for updating the id of a tag using JavaScript?

Html Code:- {% for post in posts %} <article class="media content-section"> <div class="media-body"> <h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}&l ...

javascripthtmldjango

Oops! The Route.get() function in Node.js is throwing an error because it's expecting a callback function, but it received

Currently, I am learning how to create a web music admin panel where users can upload MP3 files. However, I have encountered the following errors: Error: Route.get() requires a callback function but received an [object Undefined] at Route. [as get] (C:&bso ...

javascriptnode.jsmongodbexpress

Find all the different ways that substrings can be combined in an array

If I have a string input such as "auto encoder" and an array of strings const arr = ['autoencoder', 'auto-encoder', 'autoencoder'] I am looking to find a way for the input string to match with all three values in the array. ...

javascriptreactjsregex

Angular JS allows for the display of text from a textarea upon clicking the submit button

Q] How can I display a single text message from a textarea upon clicking the submit button in angular-js? Here is the current code that I have: <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1 ...

javascriptjqueryhtmlangularjs

Dynamically Inject HTML with Drag-and-Drop Interaction

Looking for an easy method to move html elements or content around on a webpage? The objective is to drag the element and release it onto a designated area. After dropping the element, customized html content will be added dynamically depending on ...

javascriptjqueryjquery-uidrag-and-drop

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

I have been attempting to solve the issue at hand without much success. As a newcomer to web development, I have been working on creating a basic app using angularjs and bootstrap. My pages are fairly sparse, consisting only of a few inputs and buttons t ...

javascripthtmlcssangularjstwitter-bootstrap