Disappearing act: conceal element when overflow is applied to x

While using overflow-y visible on the child div, a 10px section is getting hidden when hovered over. I want that 10px portion of the child to be visible.

If I remove both overflow properties, it works fine. What could be causing this issue and how can it be fixed? I still need overflow-x to be hidden

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
}

.offers-parent {
  height: 185px;
  overflow-x: hidden;
  overflow-y: visible;
}

.offers-child {
  width: 310px;
  height: 185px;
  background: red;
  cursor:pointer;
}

.offers-child:hover {
  transform: translateY(-10px);
}
<div class="page-wrapper">
<div class="offers-parent">
  <div class="offers-child-wrapper">
    <div class="offers-child"></div>
  </div>
</div>
</div>

htmlcss

Answer №1

Consider utilizing overflow-x:clip. This property is well-supported in modern browsers, but it's advisable to verify compatibility with caniuse.com if you need to cater to older platforms like IE11 or Opera Mini.

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
}

.offers-parent {
  height: 185px;
  overflow-x: clip;/* changed this from hidden */
  overflow-y: visible;
}

.offers-child {
  width: 310px;
  height: 185px;
  background: red;
  cursor:pointer;
}

.offers-child:hover {
  transform: translateY(-10px);
}
<div class="page-wrapper">
<div class="offers-parent">
  <div class="offers-child-wrapper">
    <div class="offers-child"></div>
  </div>
</div>
</div>

Dev Tip.

You can utilize CSS @supports to implement overflow:clip only where supported. Aim for your design to function adequately without it and then enhance it for compatible browsers.

@supports (overflow:clip) {
 /* safe to use overflow:clip */
  .offers-parent {
      overflow-x: clip;
  }
}

Answer №2

Adjusting the parent container size might resolve the issue of moving it upwards. To illustrate this, I have added some borders and background colors for clarity.

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
  border-color: orange;
  background-color: #FF000020;
}

.offers-parent {
  height: 200px;
  overflow-x: hidden;
  overflow-y: visible;
  border: solid 1px #00ff00;
}

.offers-child {
  width: 310px;
  height: 185px;
  background-color: red;
  cursor:pointer;
  border: solid 1px #ff00ff;
  margin-top: 12px;
}

.offers-child:hover {
  transform: translateY(-10px);
}
<div class="page-wrapper">
<div class="offers-parent">
  <div class="offers-child-wrapper">
    <div class="offers-child"></div>
  </div>
</div>
</div>

Alternatively, you can use padding on the parent element.

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
}

.offers-parent {
  padding-top: 10px;
  height: 185px;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: #FF00FF20
}

.offers-child {
  width: 310px;
  height: 185px;
  background-color: red;
  cursor: pointer;
}

.offers-child:hover {
  transform: translateY(-10px);
}
<div class="page-wrapper">
  <div class="offers-parent">
    <div class="offers-child-wrapper">
      <div class="offers-child">&nbsp;</div>
    </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

Bootstrap for arranging DIVs in a responsive manner

I am trying to place some DIV elements inside their parent container, whether it is the body, a table's cell, or another div, using Bootstrap 5. The desired layout is shown on the attached illustration: https://i.sstatic.net/QKwjK.png If there is an ...

csstwitter-bootstrapresponsive-designbootstrap-5getuikit

Discover the latest CSS styles and HTML attributes that impact the dimensions of an image

I am in the process of developing a custom jQuery plugin that will enable me to easily change the "src" attribute of an image on my website based on the width of the browser. However, I've encountered an issue where when the new image is loaded, the ...

javascripthtmlcss

What is the best way to display a mySQL database in an HTML div table?

Showcasing the grades in a table format: username assignment weight mark a a1 10% 50% b a1 10% 60% Can this be achieved using PHP/HTML? <div class="a"> <div class="divTabl ...

phphtml

Is there a way to automatically resize the images on my navbar as the screen size decreases?

Is there a way to make the images in my navbar resize automatically so they remain next to each other instead of stacking on top of one another, especially when viewed on a mobile device where the navbar takes up a significant portion of the screen? Below ...

htmlcssnavbar

Enabling the "ct" ligature feature in Google Web Fonts

In my current project, I am using the IM Fell English font. You can find it here: This font supports ligatures such as "ff", "fi", "ft", and even the "long s" ſ. However, I'm facing an issue with getting the "ct" ligature to work correctly, althoug ...

cssunicodegoogle-font-apigoogle-fontsligature

Implementing bootstrap columns while displaying individual components one after the other

Here is the html code I am currently working with: <label>Search:</label> <input type="text" id="list_search" class="form-control col-8"> <button class="btn btn-info col-2">Search</button> It's interesting to note that ...

htmlcssbootstrap-4frontend

What is the process for accessing the data attributes of div elements and then transferring them to a cookie?

Although this question may have been answered before, I couldn't find a specific solution. Imagine I have the following div elements... <div class="listings-area"> <div itemtype="http://schema.org/Product" itemscope=""> <a class="lis ...

javascriptjqueryhtmlcss

Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only dis ...

htmlcss

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...

htmlangulartypescriptscroll

Changing `margin-top` will also affect adjacent sibling elements

Currently, I am in the process of designing an About page for my website. Within this layout, there is a main parent element named maindiv, which utilizes a flexbox to house two children: leftcont and rightcont. My goal is to implement an animation using m ...

htmlcssanimationcss-animationsmargin

"JQuery's selector is failing to locate elements once they have been loaded through an

I am facing an issue where jQuery selectors are not working on elements loaded from the server via Ajax requests, but they work fine in normal mode. $('#myid').change(function(){ alert('OK!'); }); <select id="myid"> <optio ...

javascriptjqueryhtmlajax

Arrange the divs at the top and bottom of a Bootstrap 5 column

I am working with a Bootstrap 5 row that contains multiple columns. Each column consists of an image and a paragraph. Since the images have varying heights, I am trying to align everything by: setting the child div to have a height of 100% using h-100 al ...

csstwitter-bootstrapbootstrap-5

What is the process to modify the font color on a webpage using a button?

I need some help figuring out how to change the font color on my website when someone clicks a button. I already have the background functionality working, but I can't seem to get the text color to change. This is the code I have so far: <div cl ...

javascriptcssbutton

Implementing Pagination or Infinite Scroll to Instagram Feed

Currently, I am working on creating an Instagram feed for a fashion campaign where users can hashtag their photos with a specific tag. Using the Instagram API, the script will pull all recent posts with this common tag to display on the webpage. Instagram ...

javascripthtmlajaxpaginationinstagram

Toggle between list elements using the inner text of the elements with jQuery

My issue lies in figuring out why my filter function isn't properly working for toggling li elements. JavaScript: $("#searchbox1").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#menulist li") ...

javascriptjqueryhtmlcsslist

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

javascriptjqueryhtmlasp.netangularjs

"Delving deep into the realm of CSS3 with

Is there a way to use the CSS3 selector to target an element under a specific class? <div> <span>Example Text</span> </div> I attempted using div:not(span) but it didn't work. (I believe the :not pseudo-class ...

htmlcssclass

The following divs are adjacent to each other, with their widths set in percentages, and the paddings

I successfully transformed divs into a column of tables. However, now I am looking to add some padding between the divs. When I attempt to do so like this: <div style="float:left; width:100%;"> <?php foreach ($datas as $rec) { ?> <div ...

csshtml

Flawless 2D mouse selection using Canvas for pixel-perfect accuracy

Currently, I am developing a 2D game in HTML5 using Canvas that requires precise detection of mouse click and hover events. The main challenges I am facing include the need for pixel-perfect detections, working with non-rectangular objects such as houses a ...

javascripthtmlcanvas

An innovative approach for converting CSS animations to flutter projects

During a recent collaboration with fellow designers, they shared some CSS animation examples from CodePen that needed to be integrated into our current project. The animations ranged from simple to complex, like the following: * { margin: 0; padding ...

cssflutterflutter-animationcodepen