[ANSWERED] javascript – CSS Text Fade Out – Read More with background image that is not solid color

Question 1

Simple hack – use the main background for the fade effect.

HTML

<div class="container">
  <p class="container__content">
    Note: This is just a hack.
    Your implementation may differ.
    This example only has the visual part display part i.e
    showing fading option before the full document is shown.
    You need to hide the pesudo class on button click.
  </p>
  <button class="container__more-btn">Read More</button>
</div>

CSS

.container {
  position: relative;
  background: url(img.jpg);
}

.container__content {
  position: relative;
}

.container__content::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 2rem;
  background: url(img.jpg);
  left: 0;
  bottom: 0;
  opacity: 0.7;
}

.container__more-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

adjust the height and opacity in the container__content::after as per need.

Also change the image.
Feel free to ask if something is unclear.

Question 2

There is no easy way to solve your problem. Your background image is a JPG with solid colors. Simply changing the opacity is not enough. A linear-gradient on its own can do little on a solid image.

So, what I did:

Created a new ‘notice_back’ image with Photoshop, white background, added noise (with fg-color white and bg-color #d5d5d5), removed a lot of white pixels to get transparency, did a very subtle Gaussian Blur (0.4) and saved the file as PNG (with alpha channel).
The new PNG is now used as background-image for both <body> and the .container top and bottom gradients instead of the original JPG. This is [MANDATORY] for the solution to work.
body {background-color: rgba(220,220,220,1)} is used to fill in some color for the removed PNG pixels (any color will do, but we need to stay close to the original).
background-color: rgba(220,220,220,.8), slightly transparent to let pixels shine through for the gradient top and bottom.
Instead of using background-image for the linear-gradient we use a mask-image with a gradient of black to transparent, which gradually blocks out the pixels. (I dunno the technique behind it, but it has to do with XOR-ing input and output pixels).

I created a demo with large and bold text to see the effect (which would otherwise be hard with these light colors). Zoom in if you have to, it really does work….

The code:

/*******************/
/* SO60741467 demo */
/*******************/
body { /* [MANDATORY] (parent container) */
    background-color: rgba(220,220,220,1); /* darkest color that appears in 'background-image' */
}

.container { position: relative } /* [MANDATORY] stacking context for :before/:after */

body,
.container:before,
.container:after { /* [MANDATORY] */
    background-image     : url(https://i.stack.imgur.com/HvnVb.png); /* background image PNG with transparent pixels */
    background-repeat    : repeat;
    background-attachment: fixed;
}

.container:before,
.container:after { /* [MANDATORY] */
    position: fixed; left: 0; width: 100%; height: 6rem; content: '';
 
    /* same as <body> but with subtle transparency, adjust to needs */
    background-color: rgba(220,220,220,.8);
}
.container:before { /* [MANDATORY] */
    top: 0;     /* position at top of text */
                /* start with solid color, end transparent */
    mask-image: linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
}
.container:after { /* [MANDATORY] */
    bottom: 0;  /* position at bottom of text */
                /* start transparent, end with solid color */
    mask-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);
}
/************************/
/* personal preferences */
/************************/
html,body             { box-sizing: border-box; width: 100%; max-width: 100%; height: 100%; margin: 0 }
*::before,*::after, * { box-sizing: inherit }

/******************/
/* eye-candy only */
/******************/
/* responsive document font-size */
html { font-size: calc(0.625vmin + 12px) } /* y=mx+b for p1(320,14) p2(1280,20) */
body { font-size: 1rem }

.container {
    width: calc(61.25vmin + 104px); /* y=mx+b for p1(320,300) p2(1920,1280) */
    margin: 0 auto;                 /* center horizontally */
    font-size: 1.5em;               /* larger font to fill screen with text */
    font-weight: bold;              /* to see effect even better */
}

<div class="container">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
        qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
    <p>Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel
        phaedrum conceptam ut.</p>
    <p>Nam id utinam referrentur, similique intellegebat ad mel, eu nobis aeterno qui. Ad quodsi cetero sed, deserunt disputando nam an, veri
        viderer consetetur vel an. Zril vivendo pro no, oratio scripta quo eu, aeque elaboraret duo et. Ea nonumy essent sed, enim cetero pri an. An
        zril facete ius.</p>
    <p>Id delectus fabellas praesent duo, ei vim consequat democritum. An mei tamquam iuvaret philosophia, amet vitae usu at. Errem equidem eam
        eu, per sumo audire vocibus an, ridens laoreet duo ut. Pro te velit efficiendi, an ius tation noster. Inimicus argumentum eu quo, no invenire
        mandamus philosophia nam. Simul placerat efficiendi eu eum.</p>
    <p>Sed ex quas mazim intellegam. Ad harum dicant sanctus vis, etiam assum complectitur his ex, solum noster instructior id mei. His brute
        facilis adversarium eu, vix officiis persecuti incorrupte te. Te odio mundi sanctus has. Cetero blandit pertinax te cum, cum solet
        theophrastus ex.</p>
    <p>Erant iudico ei nam, no nihil malorum vituperatoribus mel. Graeci pericula eos cu, ad oratio partem abhorreant quo. No aeterno fastidii
        legendos vel, pro vide dissentiet an. Possit epicurei definiebas eos no, eum no diam augue. Sed ex tritani diceret tacimates, ea latine
        singulis interpretaris vis, vel quaestio definiebas at.</p>
    <p>Ei scripta imperdiet has. Wisi vivendo pri te, mel lorem quodsi sensibus ne, in cum eripuit platonem evertitur. Vis an quis possit
        voluptatibus. Eum fastidii appareat id. Augue elitr bonorum per at, nam ne veri possit scribentur.</p>
    <p>An probo etiam sit, ut agam epicuri similique eum. Dicam iuvaret in mel, no has consul causae vocibus, ad veniam aperiam voluptatibus sed.
        Posse inimicus necessitatibus pri an, no sed invidunt laboramus. Nostrum sadipscing ex sea, ad pro idque suscipiantur.</p>
</div>

Question 3

I have a page that has a background image of like parchment paper. There is a long text section that we want to fade the last line or so of the first paragraph and then add a read more button to drop down the rest. There are a lot of examples of using fading text with a solid background, but I can’t find any that use a background image (that’s not a solid color). (page: https://kringle.cash/goodwillFade.php)

I’ve tried about 20 different examples and so far I’ve been unable to morph any of them into actually using the whole text fade effect with a real image as the background.

Admittedly I’m not very proficient with CSS and effects as I’m a backend programmer by profession. Any help would be greatly appreciated.

TIA

Bollate

[ANSWERED] javascript – CSS Text Fade Out – Read More with background image that is not solid color

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Rene van der Lende

Comment posted by Jim_M

By

Related Post

[ANSWERED] html – Child div has an offset border

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] problem in selecting list item in html/css

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate