Expand – How to create a text fade out?

Hi davidkneale,

Try this (it’s working for me):

/*Shortcodes Ultimate - Fade Out Expand*/
.su-expand .su-expand-link-more:before {
	display: block;
	content: "";
	position: absolute;
	bottom: 73px;
	height: 40px;
	width: 97%;
	background: -moz-linear-gradient(top, rgba(241, 241, 241, 0) 0%, #ffffff 120%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(241, 241, 241, 0)), color-stop(85%, #ffffff));
	background: -webkit-linear-gradient(top, rgba(241, 241, 241, 0) 0%, #ffffff 120%);
	background: -o-linear-gradient(top, rgba(241, 241, 241, 0) 0%, #ffffff 120%);
	background: -ms-linear-gradient(top, rgba(241, 241, 241, 0) 0%, #ffffff 120%);
	background: linear-gradient(to bottom, rgba(241, 241, 241, 0) 0%, #ffffff 120%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	border-bottom: 1px solid #d3d3d3;
}
.su-expand-link i {
	position: relative;
	bottom: 3px;
	margin: 0 0.5em 0 0;
}
body .su-expand-link:hover {
	opacity: 1;
}

hello Caleb, here do you put the code?

thank you.

Hi @brunommab,

This code above is called CSS and can be placed the style.css file of your Child Theme. If you are not using a Child Theme, Shortcode Ultimate actually has a box for Custom CSS when you click “Shortcodes > Settings” in the Dashboard. This should work great for your needs.

Does that help? Keep us posted!

hi @caleb

I try, but it dont work… :/

i put the code on style.css and dont work, then i try on “Shortcodes > Settings”, still dont work…

the shortcode i use is this:
[su_expand more_text=”Continuar a ler…” height=”50″ hide_less=”yes” link_style=”button” link_align=”center” more_icon=”icon: arrows-alt”] [/su_expand]

it should work??
thanks!