Tips for resolving overlay ping problems

I am facing an issue with my content overlapping in the bottom padding area. I want to create space at the bottom and top, but while the top space is working fine, the bottom padding area is causing content overlap.

Can anyone provide a solution for this type of issue? Additionally, I would appreciate suggestions on how to scroll the content area when entering large text in the box. I have also attached an image showing the overlap, please check it out.

Thanks in Advance.

https://i.sstatic.net/IUFiV.jpg

* {
  box-sizing: border-box;
}

.box {                
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
img {
  max-width: 100%;
}
.content {
  position: absolute;
  height: 100%;
  bottom: 20px;
  padding: 15px;
  overflow: hidden;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  top: 0;
}
.content p {
  margin-bottom: 0;
}
<section class="features-box-style">
  <div class="box">
    <div class="image">
      <img src="http://placekitten.com/1000/500" alt="" />
    </div>
    <div class="content">
      <p>Lorem Ipsum is simply dummy text... printer</p>
    </div>
  </div>
</section>

htmlcss

Answer №1

If you're looking for an alternative solution, you might want to consider using a transparent border instead of padding.

* {
  box-sizing: border-box;
}

.box {                
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
img {
  max-width: 100%;
}
.content {
  position: absolute;
  bottom:0;
  left: 0;
  right:0;
  top: 0;
  border: 15px solid transparent;
  overflow: hidden;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
}
.content p {
  margin: 0;
}
<section class="features-box-style">
  <div class="box">
    <div class="image">
      <img src="http://placekitten.com/1000/500" alt="" />
    </div>
    <div class="content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
    </div>
  </div>
</section>

Answer №2

* {
  box-sizing: border-box;
}

.box {                
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
img {
  max-width: 100%;
}
.content {
  position: absolute;
  height: 100%;
  bottom: 20px;
  padding: 15px;
  overflow: hidden;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  top: 0;
}
.content-wrapper{
height: 100%;
overflow-y: auto;
}
.content p {
  margin-bottom: 0;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
<section class="features-box-style">
  <div class="box">
    <div class="image">
      <img src="http://placekitten.com/1000/500" alt="" />
    </div>
    <div class="content">
<div class="content-wrapper">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text... Ever since the 1500s, an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
    </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

Utilizing Nesting in Less-CSS: Unleash the Power of Greater Than Sign

When working with LESS-CSS, you can achieve the same result with the following code: .a { .b { font-color:red; } } or you can use the nested selector directly like this: .a .b { font-color:red; } But is there a way to target only direct child ...

csscss-selectorsless

Angular 8 UI not displaying mockAPI data as expected

My mockAPI is successfully fetching the data, but the json response structure is quite complex. It looks something like this: [ { "planList": [ // plan details here ] } ] Everything in the UI is displaying correctly, except ...

htmlangularapifrontendangular8

How does ASP.Net MVC substitute the HTML tags with elements that are not compatible with browser parsing?

Creating an HTML string like this: ViewBag.FinalHTML="<a href=\"http://stackoverflow.com\">StackOverFlow</a>"; and then attempting to display it in a View using the following code: This is the best Q&A for programming questions ...

c#asp.nethtmlasp.net-mvcunicode

Is there a way to prevent Mac users from using the back and refresh buttons on their browser?

There seems to be a common trend of disabling the back button or refresh button on Windows using JS or Jquery to prevent F5 from working. Can this same method be applied to CMD+R on Mac computers? ...

javascriptjqueryhtmlcss

ensure that the radio button is selected on the contact form 7

I'm looking to customize the appearance of my radio buttons within a WP plugin ContactForm7. I found some CSS code on this website: Source CSS code My goal is to change the color of the radio button to green when it's clicked or checked: .wpcf7 ...

csswordpressradio-button

Why does my 'click' event listener only work for the first two <li>'s and not the others?

I am new to programming and recently achieved success with my 'click' eventListener. When clicking on the first two li elements within the ul, the class of the div toggles on and off as expected. However, I encountered an issue where clicking on ...

javascripthtmlcss

Django is looking for a primary key that I do not possess

Encountering an issue: invalid literal for int() with base 10: 'ljrh' This error occurs when attempting to add a new entry in a model: day = itemize(value, getday(strip(key))) add = Reoccurring(request.user.username, strip(day.Day), strip(day. ...

pythonhtmldjangohttppost

Iterate through the MongoDB database array by using the @foreach loop in an Express application

Hey there, I've got a database that I can view using HTML and Express layout. I believe @each and {{}} are JavaScript syntax. {{posts[0].detail}} <----------------This is working However, I'm looking to display all the contents of each pos ...

htmlnode.jsmongodbexpress

Using the not operator in Selenium IDE XPath for waitForElementNotPresent seems to be ineffective

I am facing an issue with an XPath in Selenium IDE. In a table, there are multiple records. Above the table headers, there are filtering dropdown menus and a funnel icon that triggers an AJAX function to retrieve filtered data. The problem is that Seleniu ...

htmlseleniumxpathselenium-ide

Create captivating typography following the bezier curve using paper.js

Is it feasible to effortlessly place text along a bezier curve utilizing paper.js? I am aware that one can connect text to a straight path and then rotate it, but my focus is on placing text precisely along the curve. Something similar to http://www.w3.or ...

javascripthtmlcanvaspaperjs

Creating captivating visual effects with Jquery color overlays on images

Trying to figure out how to create a hover effect on images that darkens them using Bootstrap. However, I want the effect to be contained within the white padding of the image and not cover the entire area including the white border. I've been strug ...

jquerycsstwitter-bootstrap-3jquery-hover

jQuery's outerHeight() and height functions may experience flickering or fail to update properly when the window is resized to an odd number

Two elements are placed side by side on a webpage. One element, with a fixed size of 100vh, is named .hero-half, while the other element, holding text of varying lengths, is fluid and labeled as .project-details. When the text container extends beyond the ...

javascriptjquerycssflickerouterheight

The mix-blend-mode feature is not compatible with Chrome browser

I'm having an issue with the mix-blend-mode property in Chrome, as it's not functioning correctly. However, it works perfectly fine on Firefox and Safari. My goal is to achieve a cutout text effect. Thank you for any assistance! h1 { mix-blend ...

cssmix-blend-mode

What Causes mat-bottom-sheet-container to Overflow Instead of Remaining Anchored at the Bottom of the Mobile Screen?

I am encountering an issue with a popup window in my Angular app. Despite testing it on various screen resolutions using Chrome's DevTools Screencast, the popup appears correctly styled and positioned on mobile devices. However, when tested on a real ...

androidcssangularangular-material

Updating $scope variables in AngularJS for real-time refreshing in the HTML

Is there a way to automatically trigger my variable in the $scope object? //controller setInterval(function(){$scope.rand=Math.random(10)},1000); //template {{rand}} I am having trouble updating the 'rand' variable on my page. What is the solu ...

javascripthtmltemplatesangularjs

Easy PHP navigation options

Creating a basic PHP page with includes is proving challenging when it comes to navigating URLs using '../' to find the correct path to the folder. Is there a straightforward way to set up a simple PHP navigation without involving MySQL or other ...

phphtml

I'm currently attempting to create a dynamic object using code, but it doesn't seem to be functioning as expected. I'm curious about what might be causing the issue

I am brand new to exploring JavaScript, HTML, and CSS. I've gone through my code several times but can't quite pinpoint what's causing it not to function properly. While there are no apparent errors being returned, the expected behavior is n ...

javascripthtmlcssfunction

When a user hovers over the image, a button is revealed

I have a test page on my website: If you'd like to check it out, feel free to visit: I am trying to create a feature where when you hover over an image, a black button with text and links will appear. When you move your mouse away from the image, ...

csshovermouseovercenter

Challenges with jQuery parent method reaching the grandparent element

Hey, I'm a newbie to jQuery and I'm trying to make changes to divs that are two levels above the function trigger: Here's my initial attempt: I try to locate the closest '.node' which is the parent of all other divs and then modif ...

jqueryhtmlcss

Detecting Browser Version Using XML and Javascript

Recently, I created an XML file and attempted to access it using my web browser. It worked perfectly fine in Internet Explorer, but when I tried opening it in other browsers, it failed to function properly. After some investigation, I discovered that the i ...

javascripthtmlxmlcross-browser