Display a specific portion of an image in CSS, overlapping with its parent element in order to apply additional filters

Can you please review the image I've attached? What I'm looking to achieve is having a Rectangle (imagine it as a div) with a background-image (chess-pattern) that matches the parent image. The key here is for the child (Black Rect) to display only the portion of the background-image that overlaps with the parent, in order to apply additional effects like blur.

I've been wondering if there's a CSS trick to:

  • Show only the clipped part of an image where it intersects with the parent (or even the entire body); or
  • Create a dynamic CSS function to determine its own position and calculate the image-position it should display (e.g., something similar to 
    background-position: [Position-X-Of-Div] 100px;
    )

I appreciate any help on this matter! Feel free to ask if anything is unclear.

If achieving this isn't possible, I'm open to switching to SASS or LESS.

https://i.sstatic.net/fpMNi.png

css

Answer №1

Using a pseudo element allows for the following customization:

CSS lacks an intrinsic function to calculate values based on both the element and its parent, requiring a script to adjust the inner::before position relative to the inner, creating an inverse effect.

(function() {
  window.addEventListener("load", function() {
    var el = document.querySelector('.inner');
    el.classList.add('moveme');
  });
})();
.outer {
  position: relative;
  width: 95vh;
  height: 95vh;
  background: url(https://i.sstatic.net/gcSoj.jpg) center center / cover no-repeat;
}

.inner {
  position: absolute;
  left: 10vh; 
  top: 10vh;
  width: 40vh; 
  height: 30vh;
  overflow: hidden;
}

.inner::before {
  content: '';
  position: absolute;
  left: -10vh; 
  top: -10vh;
  width: 95vh;
  height: 95vh;
  background: url(https://i.sstatic.net/gcSoj.jpg) center center / cover no-repeat;

  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.inner.moveme {
  animation: moveme 3s linear forwards;
}
.inner.moveme::before {
  animation: moveme2 3s linear forwards;
}

@keyframes moveme {
  from { transform: translate(0,0); }  
  to   { transform: translate(20vh,20vh); }  
}
@keyframes moveme2 {
  from { transform: translate(0,0); }  
  to   { transform: translate(-20vh,-20vh); }  
}
<div class="outer">
  <div class="inner"></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

Capture a screenshot of the icons

I'm curious about displaying specific parts of images in a React Native application. class InstaClone extends Component { render() { return( <View style={{ flex:1, width:100 + "%", height:100 + "%" }}> <View style={st ...

javascriptcssreactjsreact-native

The HTML div is not aligned in the center even when using flexbox

After creating a list within a centered flex div, it seems that the list is not aligning properly. I used flex on the list-div2 and the translate rule in the parent's middle-text div, but it still doesn't look centered as expected. Can anyone p ...

htmlcssflexbox

Vertical tab design in Bootstrap does not automatically switch tabs

I'm managing two separate tab boxes that switch content when clicked or over a 5-second period. https://i.sstatic.net/Ujz9H.jpg https://i.sstatic.net/sFc1K.jpg The left box is functioning correctly, but the right box is changing the active state wit ...

javascriptjqueryhtmlcsstwitter-bootstrap

Use the CSS property of display:none; on elements that have not been selected

There are multiple divisions on this page, and one of them has the class "active". I am looking to hide all the divisions except for the one with the "active" class. Can you provide me with the appropriate CSS selector for achieving this? ...

csscss-selectors

Is there a way to make a text area move along with the mouse cursor?

I have been working on my first website and everything is running smoothly so far. However, I have a new idea that I am struggling to implement. Some of the pages on my site feature a video player with buttons to select different videos. When a viewer hove ...

javascriptjqueryhtmlcss

Incorporate new functions through the css class name "javafx"

On my dashboard, I have 10 labels that share the same CSS class for mouse over events. Now, I want to change the button style after it is pressed and remove the mouse over effect. How can I achieve this? ...

javacssjavafxfxmldashboard

Wrapping a table within an article element

My coding structure appears as follows: <article> <header> <hgroup> <h1>Foo </h1> <h2>Bar</h2> <h3>1337</h3> </hgroup> </header> <table> ...

htmlcss

Troubleshooting: Issues with CSS fixed positioning

Whenever I try to scroll down, my navbar moves along with the page. Even when I resize the window, it keeps shifting despite using position:fixed. What mistake am I making? nav li:nth-child(1) { position: fixed; border: 1px solid #15317E; font-si ...

csscss-position

Tips for implementing active pagination state that persists even after refreshing the page

Currently using the Admin LTE theme and encountering an issue with its datatable. I would like the pagination tab to remain active even after a page refresh. Can anyone provide assistance with this? Here is the link to the pagination table: The image att ...

htmlcssbootstrap-4

The overflow scroll feature is activated, causing the background to appear greyed out, yet the

I've been struggling for hours to achieve this layout: Check out the code example here html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; margin: 0px; padding: 0px; } .MyNavbar { height: 30px; background-color: red; } ...

htmlcss

Strategies for making a child div fade out when the parent div is hovered over

I have a div with the class name ordershape and inside it, there is another div called fad-res. My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs. <div class="ordershape"> & ...

javascripthtmlcss

I can't understand why my body width is so disproportionately larger than usual

https://i.stack.imgur.com/jbeyI.png Encountering a new issue now. The width of my body is unusually high and I can't seem to identify the cause. I have included the code below. Tried adjusting margins but no luck. Searched for solutions online wi ...

htmlcss

Issue with modal window function on iOS 8

I have a mobile app available on the store that was created using the Ratchet framework. Everything was working smoothly until the release of iOS 8. Now, when I test the app on iOS 8, the title bars for modals are not appearing. Although the controls like ...

iostwitter-bootstrapcssios8ratchet

Make menu links stretch to match parent's width

Trying to set the dropdown submenu links in my navigation bar to match the width of their parent <li>, but it's proving to be more challenging than I expected. Below is the code: HTML: <div id="navbar" class="navbar"> <nav id="site ...

htmlcssdrop-down-menuwidthsubmenu

Will inserting a * in a CSS file affect the styling in Internet Explorer?

I've been tasked with updating an older project to incorporate the latest technologies. Within the project's style sheets, some styles are prefixed with: #calendarDiv{ position:absolute; width:220px; *width:215px; *max-width:210px; border:1px s ...

cssinternet-explorer

The toggle button requires two clicks to activate

I created a toggle button to display some navigation links on mobile screens, but it requires two clicks upon initial page load. After the first click, however, it functions correctly. How can I ensure that it operates properly from the start? Below is t ...

javascriptcssexpresshandlebars.js

Using jQuery to implement translation on scroll

Help needed with the translate-animate attribute. I have an image that I want to move upwards when scrolling down on the page. I understand how to use translateY(px) to shift it, but I'm unsure how to perform this translation while scrolling. I aim to ...

javascriptjquerycssjquery-animate

Ways to align list items to the right and left in a stylish manner using HTML and CSS while maintaining alternating bullet points

Is there a way to create a zig-zag list where alternate list elements are right aligned while the others remain left aligned? I want it to look like this: Item1 Item2 Item3 ...

htmlcssalignment

The CSS3 animations using transit do not occur at the same time in Internet Explorer and Firefox

I am currently developing a presentation library to simplify my work. Naturally, animations play a significant role in this project. The library leverages Transit for smooth CSS3 animations. One specific animation involves an element sliding into or out o ...

jqueryhtmlcsscross-browserjquery-transit

Utilizing a Stylesheet for a Single Element

Is there a way to create a footer and include it using the PHP include function from an external file, but ensure that the stylesheet within it only affects the footer and not the entire page? I typically link stylesheets in the head tag, which applies t ...

htmlcss