CSS: Centralize content and use a div to hide images that overflow the container

I successfully centered my divs and images both horizontally and vertically using CSS:

.center {
  height: 100%
}

.center-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: auto;
  overflow:hidden;
}

.overlay {
  position: relative;
  max-width: 100%;
  z-index: 9999999
}

.image{
  position: absolute
}
<div class="center">
  <div class ="center-center">
    <img class="image" src="http://kb4images.com/images/picture/37509081-picture.jpg" />
    <img class="overlay" src="http://makephotogreetings.com/upload/1456330147Happy%20Birthday%20Frame%20With%20Cup%20Cake%20and%20Your%20Photo.png"></img>
  </div>
</div>

However, I am facing an issue with the overflow property in the "center-center" class. It hides some parts but one side remains visible. I attempted to set a specific height for the frame image, but it interferes with the positioning. Is there a solution to this problem?

I have made updates to the snippet and code for clarity.

htmlcssoverflowcenter

Answer №1

In this code snippet, there are several HTML/CSS errors present such as using className which is a JavaScript convention instead of the correct usage of class in CSS. To rectify this, I have included image placeholders and eliminated most styles by utilizing flexbox for better positioning.

For the overlay functionality, it is important to set its position attribute as absolute so that it can be placed exactly over the first image on the page.

If needed, the positioning of the overlay can be adjusted accordingly. However, when adding an overlay image, there will typically be a transparent area in the middle to allow the underlying image to show through.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999999;
}
<div class="center">
  <img src="http://via.placeholder.com/350x150">
  <img class="overlay" src="http://via.placeholder.com/350x150/fff666/000000">
</div>

Answer №2

Thank you for providing a code snippet, it really simplifies things.

After reviewing your feedback on my earlier response, I decided to rework the solution in a more streamlined manner. Assuming that you have access to the CSS and that the card has fixed dimensions of 500x500.

The approach I took was to create an image container that holds the overlay image, and then set the background of this container to the other image. 

.birthday-card {
  display: block;
  width: 500px;
  height: 500px;
  position: relative;
  background-image: url('http://kb4images.com/images/picture/37509081-picture.jpg');
  background-size: cover;
  background-position: center;
}

.birthday-card img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
<div class="birthday-card">
  <img src="http://makephotogreetings.com/upload/1456330147Happy%20Birthday%20Frame%20With%20Cup%20Cake%20and%20Your%20Photo.png">
</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

Improving Material UI Responsiveness: A Comprehensive Guide

Could someone please help me resolve the overflow issue in my UI? You can view the overflow here. The second image explains the reason behind it, which you can see here. I am currently working on fixing my UI using React and Material UI. When checking the ...

cssmaterial-ui

What is the best way to use a CSS selector to target multiple divs such as block-11, block-12, and so

Here are several block IDs I have: <div id="block-11">content Here</div> <div id="block-12">content Here</div> <div id="block-13">content Here</div> <div id="block-14">conten ...

htmlcss

Issue with the visibility of nested dropdown list on the website

I am encountering an issue with a web page I am working on. On the menu bar, there is a button that triggers a dropdown list of components. These components have submenu items as well. Unfortunately, I am struggling to properly display this structure. I ne ...

htmlcssbootstrap-4bootstrap-5

The background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this? Here is the HTML code: ...

htmlcsslistbackground-coloritems

Is it not feasible to place a well within a column using Bootstrap?

Would like to place a .well div (or a button, whichever works best) within the designated green area shown in this image: here Here is the code I currently have: <div class="container-fluid"> <div class="row row1" style=&q ...

csstwitter-bootstrap

Having difficulty adding spacing between the border and the content of a label

I've designed labels to function as buttons for radio buttons. I'm struggling to figure out why I can't add padding between the border and the background color content. Should I reconsider the structure of the radio/label elements, or is th ...

htmlcss

Send multiple form submissions using JQuery Ajax without needing to refresh the page

I am facing an issue with my form submission using Ajax. After receiving a response in the form of another form, when I try to submit it again using the submit button, it doesn't go through Ajax and uses the normal method instead. Why is this happenin ...

htmlajaxformsjquery

Drop-down selection triggering horizontal auto-scroll

Within my div element, I have a table with dropdowns. The div is set up to be horizontally scrollable. To create the dropdown functionality, I utilized Harvesthq Chosen. Let me provide some context. In Image 1, you'll notice that I've scrolled ...

javascriptjqueryhtmlcssharvest

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

css

Attempting to imitate the hover effect of a scroll-down button

Looking for advice on creating a scroll down button with a hovering effect similar to the one found on this website - . Any tips or suggestions would be greatly appreciated. ...

jquerycss

The issue of importing CSS files that themselves import other CSS files via URL is causing a problem

Why is this not working correctly? I have included [email protected] A.css (css file that imports from a URL) @import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin'); Ap ...

csswebpackless

Switch the selected option in JQuery UI dropdown using a clickable button

I have a code snippet that is almost working. My goal is to change the selection of a JQuery dropdown select combobox using a separate button named "next". What I want is for the JQuery dropdown to automatically switch to the next selection every time I c ...

javascriptjqueryhtmlcombobox

The HTML Email Template fails to incorporate certain CSS styles

When attempting to create an HTML Email template that includes a button with a link and has a maximum width with consistent margins on both sides, I encountered some issues. While certain parts of the CSS were applied correctly, others were not displaying ...

htmlcssemail

When hovering, transition occurs unless the cursor is over a specific element

I have created a small box element with a close button that looks like this: ___ | X| ‾‾‾ In order to make it more interactive, I applied some CSS so that when hovered, the box expands like this: ___________________ | X| ‾ ...

csscss-transitionstransition

What is the process for updating the source in an input box?

How can I use JavaScript to update the src value of an iframe based on input? <input class="url" id="url1" type="url" value="youtube url"> <input onclick="changevideo()" class="add-video" id="add-video1" type="submit" value="add to play ...

javascripthtmlcss

Styling will_paginate Links in Rails 3 - A Guide

When it comes to coding layout, how should the link be styled? <a href="#" class="class1 class2 class3"><span>Previous</span></a> <a href="#" class="class1 class2 class3"><span>Next</span> In my search for a solu ...

htmlcssruby-on-rails-3viewwill-paginate

Encountered a challenge when attempting to substitute styles using classes in material-ui

While working on implementing a table using the TableRow component from material-ui, I encountered an issue with customizing the background color when the "selected" property is true. The default theme applies a pink background-color in such cases, but I w ...

cssreactjsmaterial-ui

Traversing through an array and populating a dropdown menu in Angular

Alright, here's the scoop on my dataset: people = [ { name: "Bob", age: "27", occupation: "Painter" }, { name: "Barry", age: "35", occupation: "Shop Assistant" }, { name: "Marvin", a ...

javascripthtmlangulartypescript

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

javascripthtmlcssnivo-slider

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

javascriptcssreactjs