Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator.

I've been studying various tutorials, including this, and my current code is as follows:

html

<section>
    <p>Lorem ipsum dolor sit amet...elit.</p>                                                                  
    <p>Ut enim ad minim veniam...aliquip.</p>
    <div class="fadeout"></div>
</section>
<p>Additional content here</p>

css

.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
}

jsFiddle

The issue I'm facing is that even with the transparent div overlapping the text body, there's still a gap of 4em between it and 'Other Stuff.'

Any suggestions?

csshtmlfadefadeoutfadein

Answer №1

Latest Update for 2020:

A new method has been discovered to achieve this effect using true alpha transparency, eliminating the need for an additional <div> covering the bottom. By simply utilizing the CSS mask-image property with a linear gradient that transitions from black to transparent, the browser can handle the rest automatically. Check out the demo below:

.container {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  height:  150px;
  width: 300px;
  overflow-y: scroll;
}
body {
  background: #09f;
  transition: background 0.5s ease-out;
}
body:hover {
  background: #f90;
}
<div class="container">
  <p>Hover over or scroll down in this demo to witness the true alpha transparency! <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nisl id lectus viverra faucibus. Cras sed est sit amet turpis placerat consequat. Vestibulum viverra accumsan nisl a dapibus. Quisque mollis porta dictum. Praesent dictum non nisl at rutrum. Nam sem orci, efficitur quis faucibus non, aliquam eget est. In nec finibus ex, quis tristique augue. Duis tristique turpis a nunc sodales tincidunt.</p>
  <p>Morbi vehicula nisi ut lacus ornare, ac tincidunt sapien pellentesque. Aliquam gravida id dolor eget volutpat. In hac habitasse platea dictumst. Aenean ac enim eros. Vivamus augue nunc, interdum vitae pellentesque nec, interdum non turpis. Quisque viverra eget nibh in varius. Vivamus vel euismod velit. Vivamus suscipit lorem et porttitor gravida. Donec non nulla nulla. Duis eget dui sed urna eleifend sagittis.</p>
</div>

An added advantage of this technique is that it provides genuine transparency rather than simulating it by overlaying text with a background-matching color. This enables scrolling and background images to be visible! The change in background color upon hover illustrates the true transparent nature of the effect.

Most browsers support this feature, although Internet Explorer may have some limitations.

Answer №2

When using relatively positioned elements, they are not removed from the normal flow of HTML, so their initial space remains reserved even if they are moved. In contrast, absolute positioning does not maintain this reserved space.

.fadeout {
    position: absolute; 
    bottom: 0em;
    width:100%;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
} 
section {position:relative}

DEMO

Answer №3

Joining the party a bit late, but there's another way to achieve this effect without using the .fadeout div. You can utilize a ::before or ::after pseudo-element like so:

        article {
            position: relative;
        }

        article::before {
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 15px;
            background: -webkit-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -moz-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -o-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -ms-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
        }

Answer №4

To create a fade-out effect on an element, simply apply the .fade-out class:

.fade-out {
  position: relative;
  max-height: 350px; // adjust the height as needed
}
.fade-out:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100% );
}

Answer №5

To achieve the same effect, I suggest changing bottom: 4em to margin-top: -4em. This adjustment worked perfectly in my case.

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

updating the HTML DOM elements using JavaScript is not yielding any response

One way that I am trying to change the background of a div is by using a function. Below is an example of the html code I am working with: $scope.Background = 'img/seg5en.png'; document.getElementById("Bstyle").style.background = "url("+$scope.B ...

javascripthtmlcssangularjsionic-framework

Adjusting image alignment and formatting long text with CSS in Firefox

I'm attempting to float an image and text within a paragraph, but encountering an issue when the text is long and in one line. The display appears fine in Chrome, but not in Mozilla Firefox. You can view the problem here: In Chrome, it looks like thi ...

htmlcssgoogle-chromefirefox

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

javascripthtmlcss

Changing Background Color on Div Click

After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...

javascripthtmlcss

Using html-mode in emacs to create a hyperlink

My image src text in emacs has become clickable. I would like to have plain text instead. How can I disable this feature? <img src="index_new_menus_files/menu_bg_2.gif" alt="" border="0" height="55" width="150"> Instead, I want it to be: <img s ...

htmlemacs

Custom HTML structure for WordPress navigation menu - WP Nav Menu

Need help creating a customized Wordpress Menu with HTML structure: <?php wp_nav_menu( array( 'theme_location' => 'global-menu' ) ); ?> The desired HTML output should resemble the following: <nav> < ...

phphtmlwordpress

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

cssangular

Fill input text fields with values based on dropdown selection and start with 2 input fields pre-filled

Initially, the issue is that there are 2 input text fields displayed. Depending on the selection from a drop-down menu ranging from 2 to 6, additional input fields should be added or removed. Here's my code: function addElements(selectElement) { va ...

javascripthtml

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

htmlcssstyles

Creating a dynamic input box that appears when another input box is being filled

I have a form set up like this: <FORM method="post"> <TABLE> <TR> <TD>Username</TD> <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD> </TR> <TR> <TD>A ...

phpjavascripthtml

Removing or hiding elements using jQuery

My HTML code includes a select tag, and when the value changes, I want to retrieve data from the database based on this new value. The data is then displayed in a new div. This new div contains a close sign that should hide the div when clicked by the user ...

jqueryhtml

Tips for displaying a refresh indicator while making an ajax call for refreshing data:

I have successfully implemented jQuery code that refreshes a specific div every 10 seconds without reloading the entire page. However, during this refresh process, the user does not visually perceive any changes happening in the browser. While there are n ...

javascriptjqueryhtmlcssajax

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...

htmlcsstextalignment

Retrieving Basic HTML Source Code in UITextView Without CSS Styling Using Objective-C

I am looking to make changes to HTML text within a UITextView. The original text was created using an HTML editor in the web version of the app and needs to be edited with a default font on iOS. Here is the simple HTML code for the text that needs editing ...

androidhtmlioscssobjective-c

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

javascriptjqueryhtmlcss

Highlight particular terms (key phrases) within text contained in a <td> tag

I am currently working on a project and facing a challenge that I am unfamiliar with. My task is to highlight specific keywords within text located inside a <td> element. I cannot manually highlight the keywords as the texts are dynamic, originating ...

javascriptjqueryhtmljsp

DOMPDF - Comparing background URL rendering between Linux and Windows

When converting HTML to PDF, my image doesn't show on a Linux server. On localhost, the image displays properly. Here is my CSS code: background: red url("<?php echo __DIR__ ?/my_img.png"); However, on the Linux server, the image does not appea ...

phphtmlcsslinuxdompdf

Is it possible to reset the text within the text box when the form is being submitted using the load() ajax function?

I am working on implementing a comment feature where the data entered in the form is appended and displayed after submission. Here is my HTML form: <table> <tr><td>Name :</td><td> <input type="text" id="name"/></td&g ...

javascriptphphtmlajaxforms

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

javascriptjqueryhtmlcssmenu

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Within a row, there are two views with flex: 1 containing text. <View style={{ flexDirection: "row", padding: 5 }}> <View style={{ flex: 1 }}> <Text>Just a reallyyyyyyyy longgggg text</Text> </View> ...

javascriptcssreactjsreact-native