Howto create an color overlay container

User 131545 Photo


Registered User
687 posts

Hello,

I am looking for how I can place some sort of overlay background color on a background image or an image. Don't have any idea how to put that into words.

I think it's more about an overlay container nested in the master container. I would design it in bootstrap 4.
Does anyone have an example how I can make that overlay effect above an image?
I have searched all over the Internet for this subject. I work with the SD 5.0

This is the code but there are inline styles and cc does not support it. Is there temp solution?


<body>

<div id="overlay" onclick="off()"></div>

<div style="padding:20px">
<h2>Overlay</h2>
<p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
<button onclick="on()">Turn on overlay effect</button>
</div>

<script>
function on() {
document.getElementById("overlay").style.display = "block";
}

function off() {
document.getElementById("overlay").style.display = "none";
}
</script>

</body>

Attachments:
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 2699991 Photo


Registered User
4,782 posts
Online Now

STEFKE wrote:
Hello,

I am looking for how I can place some sort of overlay background color on a background image or an image. Don't have any idea how to put that into words.

I think it's more about an overlay container nested in the master container. I would design it in bootstrap 4.
Does anyone have an example how I can make that overlay effect above an image?
I have searched all over the Internet for this subject. I work with the SD 5.0

This is the code but there are inline styles and cc does not support it. Is there temp solution?


<body>



<div id="overlay" onclick="off()"></div>

<div style="padding:20px">
<h2>Overlay</h2>
<p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
<button onclick="on()">Turn on overlay effect</button>
</div>

<script>
function on() {
document.getElementById("overlay").style.display = "block";
}

function off() {
document.getElementById("overlay").style.display = "none";
}
</script>

</body>


There is a permanent solution

select the container with the background image
then
simply add another container to that container by clicking or dragging
the same way as you have always been able to do right from the beginning all those years ago when you first started.
Make that nested container the same height & width as the background image container

After that it's another simple matter of styling the new nested container as you want, add content, colour gradient anything you like to that new container, the same way as you have always been able to do from the beginning

If you want the colour/gradient or text to appear on hover
set the new overlay container's
"In STATE" regular to opacity = 0
change the "IN STATE" to HOVER set the opacity to =1

add effects timing animations if you want

The same as we have always been able to do for all these years
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 131545 Photo


Registered User
687 posts

Dear support,

Here is the detailed example of overlay background image and overlay image color
Just out of love I just give it away.
Perhaps an idea to implement the overlay background as well as the animation.css classes.
Examples in attachment

With kind regards
Stephane

Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 131545 Photo


Registered User
687 posts

Wayan Jaya

Thank you for your quick feedback
With kind regards
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.