Closed Need a code.

[taliaangeni]

A character list code. I'm not all for this new BBcode stuff sooo if someone could help that'd be great.

 

[Alteras]

You need to basically make two divs inside 1 big one. One div will be your picture, the other your text. Make the text one have a position absolute to make it be able to overlay it. From there, there are two ways to achieve what you want, using bbscript and actually applying an opacity to the image, or using hover and just using a background color for the text to make it look like its been faded.

[class=container] position: relative; width: 300px; height: 500px; overflow: hidden; border: 2px solid black; [/class] [class=image] width: 100%; height: 100%; background-image: url('https://www.rpnation.com/media/img_3159.31161/full'); background-size: contain; background-position: center; background-repeat: no-repeat; transition: opacity 1s; [/class] [class=opacity] opacity: .25; [/class] [class=textcontent] position: absolute; top:0; width: 100%; height: 100%; overflow-Y: scroll; [/class] [script=container] hide textcontent [/script] [script class=container on=mouseenter] addClass opacity image fadeIn 1000 textcontent [/script] [script class=container on=mouseleave] removeClass opacity image fadeOut 1000 textcontent [/script]
[div class=container][div class=image][/div][div class=textcontent]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum leo dolor, tempus efficitur arcu pharetra vel. Phasellus sit amet ex vitae nulla sagittis finibus. Phasellus dolor lacus, consectetur id eleifend sit amet, rutrum ullamcorper mi. Duis odio tortor, porttitor sit amet semper sit amet, euismod vitae leo. Pellentesque consectetur elit sit amet erat dignissim, in laoreet libero hendrerit. Mauris consectetur malesuada aliquam. Sed sem leo, tristique id suscipit in, ornare vitae dolor. Maecenas consequat sem mi, sed sollicitudin magna sollicitudin vitae. Donec tempor ipsum non sem luctus aliquet. Integer aliquet vehicula nulla ac ultrices.
[/div][/div]

here is a rough code using bbscript:

[nobr]
[class=container]
position: relative;
width: 300px;
height: 500px;
overflow: hidden;
border: 2px solid black;
[/class]

[class=image]
width: 100%;
height: 100%;
background-image: url('https://www.rpnation.com/media/img_3159.31161/full');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: opacity 1s;
[/class]

[class=opacity]
opacity: .25;
[/class]

[class=textcontent]
position: absolute;
top:0;
width: 100%;
height: 100%;
overflow-Y: scroll;
[/class]

[script=container]
hide textcontent
[/script]

[script class=container on=mouseenter]
addClass opacity image
fadeIn 1000 textcontent
[/script]

[script class=container on=mouseleave]
removeClass opacity image
fadeOut 1000 textcontent
[/script]

[/nobr]
[div class=container][div class=image][/div][div class=textcontent]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum leo dolor, tempus efficitur arcu pharetra vel. Phasellus sit amet ex vitae nulla sagittis finibus. Phasellus dolor lacus, consectetur id eleifend sit amet, rutrum ullamcorper mi. Duis odio tortor, porttitor sit amet semper sit amet, euismod vitae leo. Pellentesque consectetur elit sit amet erat dignissim, in laoreet libero hendrerit. Mauris consectetur malesuada aliquam. Sed sem leo, tristique id suscipit in, ornare vitae dolor. Maecenas consequat sem mi, sed sollicitudin magna sollicitudin vitae. Donec tempor ipsum non sem luctus aliquet. Integer aliquet vehicula nulla ac ultrices.
[/div][/div]

 

[taliaangeni]

Thank you, Alteras!