Ways to conceal overflow at the base of a container while enabling the image to break free from the top of the container

Trying to create a visual effect where an image of a person appears to be partially hidden inside a container, with the bottom part concealed by overflow: hidden. However, I want the top part of the image to extend out of the container. Is there a way to achieve this using CSS? I've considered using clip-path: polygon() with values similar to my container's border-radius, but haven't been successful. Any suggestions on how to approach this?

.

Here is the CSS code for reference:

.avatar--container {
  border-radius: 84% 38% 70% 43% / 55% 74% 59% 71%;
  background-color: var(--pink);
  border: 20px solid var(--blue);
  height: 15rem;
  width: 25rem;
}

.avatar {
  width: 35rem;
  transform: translate(-10rem, -12rem);
  margin-bottom: 5rem;
}

<div className="avatar--container">
      <img className="avatar" src={src} alt="Rachel Hall" />
    </div>
htmlcssclip-pathborder-radius

Answer №1

If you want to conceal bottom overflow while displaying an overflow at the top, here's a neat trick:

  1. Place both image and clipped container inside a single parent element.
  2. Assign a fixed height to the parent element
  3. Position the clipped element behind the image using negative z-index
  4. Include an additional clipped element with a border and transparent background to serve as an overlay for the bottom of the overflowing element.

body{
  background-color: #ffdfe9;
}
.main {
  height: 26rem;
  width: 30rem;
  overflow: hidden;
}
div.avatar--container {
  border-radius: 84% 38% 70% 43% / 55% 74% 59% 71%;
  background-color: #ff5d8f;
  border: 20px solid #a2d2ff;
  height: 15rem;
  width: 25rem;
  overflow: hidden;
  position: absolute;
  top: 10rem;
  z-index: -1;
}
div.avatar--container.c2 {
  background-color: transparent;
  background-color: transparent;
  border-left: 20px solid #a2d2ff;
  border-right: 20px solid #a2d2ff;
  border-bottom: 20px solid #a2d2ff;
  border-top: 20px solid transparent;
  z-index: 1;
}
.avatar {
  width: 30rem;
}
<div class="main">
      <img class="avatar c2" src="https://www.freeiconspng.com/uploads/female-model-png-model-png4-by-icekitz-3.png" alt="Rachel Hall" />
  <div class="avatar--container c2">
  </div>
<div class="avatar--container">
    </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

Developing User-Friendly Websites with Responsive Design

While I was working on my project, I realized that using only pixel values in tables and sidebars was a big mistake. This caused issues because if someone had a different screen resolution, my website would look distorted and unappealing. Could you please ...

htmlcsslaravel-5responsive-design

Having trouble importing Google Fonts using Styled Components and Next.js?

I encountered an issue while attempting to load Google Fonts. I came across a solution that suggests adding the following code snippet in _document.js to import it within a head tag: import React from 'react'; import Document, { Html, Head, Main, ...

cssreactjsnext.jsserver-side-renderingstyled-components

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

javascripthtmlasp.netpath

I am experiencing issues with my images not appearing on my Laravel website despite trying various solutions found online. The images upload successfully but fail to display on the site

I'm facing an issue where the image uploads correctly but does not display. Is there something missing in my code? <div class="col-md-4"> <img class="img img-fluid img-thumbnail" src="/storage/profile_images/{{$prof ...

phphtmllaravelimage

Enhancing user experience with CSS dropdown menu animations

I've been working on adding a dropdown transition to my menu, but I can't seem to get it right. Can anyone point out where I'm going wrong or what needs to be added for the transition effect on the dropdown menu? Here is the CSS and HTML cod ...

htmlcsstransition

Picture emerges from the lineup

My dilemma involves repositioning an image within a row > col-md-6. To address this, I devised two classes - .pos1 and .pos2 .pos1 { position: relative; } .pos2 { position: absolute; right: 0px; } However, when applying these classes, the ...

htmlcsstwitter-bootstrap-3

Lock in the top row (header row)

In a node.js application: How can I lock the top row of a table in place, similar to Excel's freeze panes feature? I think this might involve using some CSS styling, but I'm not exactly sure how to achieve it. When I tried using fixed, the entir ...

cssnode.jsreactjsexpress

What is the best way to locate an element using text in xpath?

Having an issue with this HTML source code: <td class="specs_title"> Processortype <a href="#" class="info-link"> <img src="x.jpg" title="" height="16" alt="" width="16" /> <span class="info-popup"> <span class="hd">Processor ...

phphtmltextxpathfind

Setting a variable for a JavaScript function to insert a video - a step-by-step guide

Here is a grid structure that I am working with: <div class="main"> <ul id="og-grid" class="og-grid"> <li> <a href="http://..." data-video="my-url" data-largesrc="images/1.jpg" data-title="Title" data-descript ...

javascriptjqueryhtml

Is there an easy method for customizing scrollbars?

I'm looking to include an "overflow:scroll" in a navigation div, but the default scrollbar on windows is unattractive. Is there a simple way to customize the scrollbar without having to download extra JavaScript libraries, APIs, and so on? ...

javascriptjqueryhtmlcss

Angular state correctly maps to the controller but is not reflected in the HTML

I'm currently in the process of setting up a basic Angular application, something I've done many times before. I have defined a home state and another state for a note-taking app, but I am facing an issue where neither state is displaying or inje ...

javascripthtmlangularjs

Positioning a div at the bottom of the viewport, centered with 2 rows of 6 elements, and adjusting its size to fit the page

I've searched for answers but haven't found anything that works for me. I'm looking to have 2 rows of 6 elements at the bottom of the page and have them stick there as the page scrolls. I tried using a table, which almost worked. .center ...

htmlcssbootstrap-5

Error 403 with Firefox on Font Loading for CodeIgniter Website

Utilizing font-face in CSS to integrate custom fonts onto a web application being developed with CodeIgniter. This is the CSS code: @font-face { font-family: 'UniversLT-UltraCondensed'; src: url('../Fonts/LTUnivers/universlt59ultrac ...

phpcsscodeigniterfirefoxhttp-status-code-403

Activating a inaccessible element

Attempting to enable a disabled element upon clicking a P element, the following code snippet demonstrates storing a value from one textbox into another. The appended div contains a subsequent textbox which will be disabled. On mouseover of the div, option ...

javascripthtml

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

javascripthtmlangulartypescriptservice

Can a hyperlink open multiple links at the same time when hovered over?

Can two links be opened in the same hyperlink when hovered over? ...

jqueryhtmlcsswordpress

Tips for changing the background color of a dropdown menu when hovering in Zurb Foundation 5

Is there a way to customize the background color when hovering over <a href="#">Find Me</a>? I want the background color to change while hovering, similar to how it appears in the image before hovering. And this is how it looks after hovering: ...

csshtmlzurb-foundation-5

Difficulty in pinpointing hyperlinks within a styled list

My current challenge involves customizing the color of links within the <li> elements by applying specific classes to the <li> tag. The structure of my HTML is as follows: <div id="sidebar_tall"> <ul> <li class="active_item"> ...

htmlcss

The PDF format is experiencing compatibility issues when used with the CSS property for page breaks after:

My PDF with CSS page breaks is not functioning properly, as the pages are not breaking as intended. Removing position:absolute solves the issue but leaves space after each page. I suspect it may be a CSS problem, but I'm unsure. If the issue lies wit ...

javascripthtmlcsspdfphantomjs

Trouble with the Rotate <text> feature in Internet Explorer 11 on Windows 10

I am using d3.js to draw SVG with the transform:rotate(180deg) property. It displays perfectly on Chrome, but doesn't work on IE11. I tried changing it to rotateY(180deg), and it works with div elements but not with text elements. Here is my screen an ...

htmlcssinternet-explorersvginternet-explorer-11