Show the Table and Conceal the Overflow

Question

Show the Table and Conceal the Overflow

Currently, I am experimenting with creating an Img hover for entertainment purposes. However, I have added some text to my div. In order to center the text beautifully within my div, I utilized the following CSS code:

display: table-cell;
vertical-align: middle;

In addition, I have implemented the following CSS code as well:

.vertical-smallborder{
    position: relative;
    width: 217px;
    height: 350px;
    border: 5px solid white;
    outline: 1px solid #c8c8c8;
    float:left;
    display: table;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    overflow: hidden;
}

I specifically included the display: table in this section to facilitate text alignment. Removing it would disrupt the centered positioning of the text.

However, I encountered a complication with the use of overflow: hidden. This property no longer functions properly in FireFox and IE when combined with display: table.

On the contrary, both Google Chrome and Safari enable seamless compatibility between display: table and overflow: hidden.

Please note that I prefer a pure CSS solution and cannot incorporate any JavaScript for this task.

Thank you!

html css overflow vertical-alignment

Answer 1

Answer №1

Firefox Demo - Demonstrating Possibilities

In order to showcase the capabilities for Firefox, I have put together a demonstration below:

<div class="image-clipper">
    <img src="http://placekitten.com/400/500" style="margin: -150px 0 0 -100px;" />
    <div class="text-panel">
        <div class="text-cell">
        <h1>Shirt<br/>$24.95</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

The CSS used in this demo is outlined below:

.image-clipper {
    width: 250px;
    height: 300px;
    border: 5px solid red;
    overflow: hidden;
    position: relative;
}
.image-clipper .text-panel {
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    height: 100%;
}
.image-clipper .text-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 20px; /* works okay */
    background-color: rgba(255,255,255,0.5); /* applied to entire cell */
}

By implementing this setup, I was able to clip the image within its parent element and position the text appropriately as needed.

For a live demonstration, please visit: http://jsfiddle.net/audetwebdesign/JpMXP/

To Conclude

While I did not have extensive time to investigate every detail of how table/table-cell interacts with overflow: hidden, the approach outlined above appears to be effective and straightforward to comprehend.

Answer 2

Firefox Demo - Demonstrating Possibilities

In order to showcase the capabilities for Firefox, I have put together a demonstration below:

<div class="image-clipper">
    <img src="http://placekitten.com/400/500" style="margin: -150px 0 0 -100px;" />
    <div class="text-panel">
        <div class="text-cell">
        <h1>Shirt<br/>$24.95</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

The CSS used in this demo is outlined below:

.image-clipper {
    width: 250px;
    height: 300px;
    border: 5px solid red;
    overflow: hidden;
    position: relative;
}
.image-clipper .text-panel {
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    height: 100%;
}
.image-clipper .text-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 20px; /* works okay */
    background-color: rgba(255,255,255,0.5); /* applied to entire cell */
}

By implementing this setup, I was able to clip the image within its parent element and position the text appropriately as needed.

For a live demonstration, please visit: http://jsfiddle.net/audetwebdesign/JpMXP/

To Conclude

While I did not have extensive time to investigate every detail of how table/table-cell interacts with overflow: hidden, the approach outlined above appears to be effective and straightforward to comprehend.

Answer 3

Answer №2

My suggestion is to remove the following line from your CSS:

display: table;

and add top and left properties to:

.vertical-smallborder .text

By doing this, all texts will be aligned even if one of them is longer, as they will have the same starting point at the top. This adjustment will enhance the overall appearance.

Answer 4

My suggestion is to remove the following line from your CSS:

display: table;

and add top and left properties to:

.vertical-smallborder .text

By doing this, all texts will be aligned even if one of them is longer, as they will have the same starting point at the top. This adjustment will enhance the overall appearance.

Show the Table and Conceal the Overflow

Answer №1

Firefox Demo - Demonstrating Possibilities

Answer №2

Similar questions

jquery to create a fading effect for individual list items

The hexadecimal code for the textured background color of an iOS Scroll View in CSS

Desktop display issue: Fontawesome icon not appearing

Utilizing Javascript Conditional for Substitution

I keep getting redirected to a blank page by JS

The flask application encounters a 404 error when trying to access the favicon.ico file

The Gulp task is failing to generate the CSS file

Implemented an HTML hyperlink element precisely positioned

Transitioning Between Div Elements Using Jquery

What is the best way to dynamically update form fields in a database after making a selection in a <select> component?

Tips for ensuring proper function of bullets in glidejs

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

How can I display the output from Geocoder in a text box using the ArcGIS JavaScript API?

`Incorporating JavaScript for Menu Navigation on the Homepage: Challenges Ahead`

Turn off hover effect for MUI DataGrid

Is it necessary to capitalize the first letter only when it's not at the beginning of a sentence?

Adjust the dimensions of the canvas without disrupting the existing artwork

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Embed the website onto a webpage using ajax or an iframe without any need for navigation