Fade bottom or top of text in a div

Abe Fehr Published at Dev

Abe Fehr

I'd like to create a list with a particular size, but it's contents can be larger than the list.

I thought it would be real nice looking if the list had items in it and they faded out at the bottom and the top, while having a background image for the container that also contains the list. This is proving harder than expected, and I'm having a difficult time finding an appropriate guide for such a thing.

The images below shows the expected result

enter image description here

Is this even possible? Thanks in advance.

Edit:

I've looked at this and this, but I can't use those techniques because there's a background image in the background, not a solid color

Samuel Cook

I was able to get an ugly prototype together. This only works with -webkit- browsers (Chrome, Safari, etc), but it might point you in the right direction and help you adapt to get it cross browser compatible.

.con{background:#0f0; color:#fff;}
ul{margin:0; padding:0; list-style:none; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,  from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

<div class="con">
    <ul>
    	<li>thing1</li>
    	<li>thing2</li>
    	<li>thing3</li>
    	<li>thing4</li>
    	<li>thing5</li>
    	<li>thing6</li>
    </ul>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-16

Comments

0 comments

From Dev

Related Related

Article

Fade bottom or top of text in a div

Fade bottom or top of text in a div

Top div cover text in bottom div

How to fade in from bottom to top

How to fade out SnackBar bottom to top

Fade in div with text

fade line on top and right of div

Have text-div aligned right bottom on top of image

Align on top and on bottom in the DIV

Fix div at top and bottom

Fade in and Fade Out Text in DIV - Remove Loop

How to fade out text on top of semi-transparent div using CSS?

How to fade out text on top of semi-transparent div using CSS?

Align div from bottom to top

Rotating Div from bottom to top

Div with double arrow on top and bottom

Div with double arrow on top and bottom

Fade and translate the "position:absolute" element from top to bottom using jquery

ios uitableview fade bottom cell and top cell as you scroll

iOS 7 navigationbar barTintColor - able to have it fade from top to bottom?

Top & bottom bars fade in and out during activity transition animation

iOS 7 navigationbar barTintColor - able to have it fade from top to bottom?

ios uitableview fade bottom cell and top cell as you scroll

Center a text at the bottom of a div

Faded text at bottom of div?

Text starts at bottom of div

jQuery div fade text only, keep the div

Top and Bottom border in CSS doesn't align text vertically inside a <div> tag

How can I fade in and then fade out text inside a <div>

How can I fade in and then fade out text inside a <div>

Text will not align to top of div