-2

I have added the following code to my article:

<div id="container">
    <div id="contents">
       <img src="image here">
    </div>
    <div id="gradient">
    </div>
</div>

and the following code to my css

#container {
    position:relative;
    padding:50px;
    margin:50px;
}
#contents {
    background:white;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:300px;
    background: none;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

Everything works fine, however can someone show me how to make the fade appear in the middle of the article? At the moment, the fades out at the end of the article.

Cheers

Carlton

  • Just a side note, startColorstr='#00ffffff' is incorrect. The colour hex you've defined has 8 characters, instead of 6 – Lodder Jul 6 '16 at 11:14
  • @Lodder That's because it is ARGB not RGB – wobbles Jul 6 '16 at 11:39
  • FYI, since this really has nothing to do with joomla, should really be on SO – wobbles Jul 7 '16 at 15:48
1

Just modify the 80% to 50%.

#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:300px;
    background: none;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
  • Can someone show me how add some text to the fade section – Carltonp Jul 6 '16 at 13:30
  • Just include it in whatever div you apply the style to. – wobbles Jul 6 '16 at 15:00
  • I'm not sure I know what you mean? I haven't applied anything to my styles. I'm pretty much a novice to all this coding. I'm just copying coding from the internet and seeing if it works. So far it has worked. The only thing left is to add text to the faded area as I explained. The only file I have applied the code to is the articles and the template.css. – Carltonp Jul 6 '16 at 15:07
  • Yes you have, The #gradient in the css corresponds to the element with the matching id such as your <div id="gradient"> – wobbles Jul 6 '16 at 15:14
  • do you mean this <div id="container"> <div id="contents"><img src="images/WAN650/exercise1/586-1200.jpg" alt="586 1200" /><img src="images/WAN650/exercise1/587-1200.jpg" alt="587 1200" /> </div> <div id="gradient"> <p style="line-height: 22.4px; text-align: center;"><span class="componentheading" style="font-size: 18pt; color: #ff9900;">We're Very Sorry, Full Content Access is For Members Only - </span> </p> <p style="line-height: 22.4px; text-align: center;"><span class="componentheading" style="font-size: 18pt; color: #ff9900;"><a href="index.php/ed-serv/settings-2" – Carltonp Jul 6 '16 at 15:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.