hello . How to creat overlay Like this?

Mann Ross · Sep 11, 2020

does anyone have this kind of grid?

Saint Gabriel · Sep 11, 2020

Link to the website?

hug3tz · Sep 11, 2020

Just overly button and text? Elementor can do this easy. Just play abit with css and done if needed.

Mann Ross · Sep 11, 2020

RonanTheAccuser said:
Link to the website?

frontendmasters.com

Mann Ross · Sep 11, 2020

hug3tz said:
Just overly button and text? Elementor can do this easy. Just play abit with css and done if needed.

No brother generally . can this make with CSS? possible

hug3tz · Sep 11, 2020

ibtasam said:
No brother generally . can this make with CSS? possible

Well surely this can be done easily if using elementor. Are u using it? And are u referring to the button styles or just the diagonal background line?

Mann Ross · Sep 11, 2020

hug3tz said:
Well surely this can be done easily if using elementor. Are u using it? And are u referring to the button styles or just the diagonal background line?

diagonal lines . (grid)

hug3tz · Sep 11, 2020

Elementor Developers - Learn About Elementor’s Internal Technologies

Welcome to the Elementor Developers Documentation Center. Here, you’ll find detailed documentation, clearly explaining how developers can leverage the wide-range of tools and options Elementor provides them.

docs.elementor.com

Niko Nemo · Sep 11, 2020

This overlay look nice

i would like to know too how...

Saint Gabriel · Sep 11, 2020

ibtasam said:
frontendmasters.com

Okay, the black grid overlay.

I think it can be done if you can find the grid transparent PNG image.

Then you set it as the section background image then apply the black colour to it.

Saint Gabriel · Sep 11, 2020

RonanTheAccuser said:
Okay, the black grid overlay.

I think it can be done if you can find the grid transparent PNG image.

Then you set it as the section background image then apply the black colour to it as an overlay.

But also make sure the background overlay opacity is not too dark. Because the grid image would be whitish.

Saint Gabriel · Sep 11, 2020

RonanTheAccuser said:
But also make sure the background overlay opacity is not too dark. Because the grid image would be whitish.

Something like this but the transparent version. Although I think this could work too. Only the grid boxes are bigger.

MrSam_1 · Sep 11, 2020

RonanTheAccuser said:
Okay, the black grid overlay.

I think it can be done if you can find the grid transparent PNG image.

Then you set it as the section background image then apply the black colour to it.

This seems to be the relevant code...

CSS:

.LearnAbout .grid {
    z-index: 2;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAQAAAAD+Fb1AAAAEklEQVR42mNg+M8AAhASDUClAEXeA/1LlYqzAAAAAElFTkSuQmCC);
    opacity: .75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
}

videva · Sep 11, 2020

ibtasam said:
diagonal lines . (grid)

like this ??

if like the picture above,
see code below

CSS:

/* you can adjust thin-dotted or bold-dotted in var() */
.background {
    --thin-dotted: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQYV2NkQAOMUH4DAwMDCDPABODqMAQAKe4BBZTlhh0AAAAASUVORK5CYII=");
    --bold-dotted: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAQAAAAD+Fb1AAAAEklEQVR42mNg+M8AAhASDUClAEXeA/1LlYqzAAAAAElFTkSuQmCC");
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    background: var(--bold-dotted), url(https://i0.wp.com/keralaspeechfoundation.com/wp-content/uploads/2019/09/file-20181001-19012-1222oat-1.jpg) 50% no-repeat;
    background-size: auto, cover;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    z-index: 2;
}
/* html structure
    <section class="container">
            <div class="background"></div>
    </section>
*/

frizzel · Sep 11, 2020

And to get the exact background pattern you want in a Base64 code, use Patternify.

Mann Ross · Sep 12, 2020

videva said:

like this ??

if like the picture above,
see code below

CSS:

/* you can adjust thin-dotted or bold-dotted in var() */
.background {
    --thin-dotted: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQYV2NkQAOMUH4DAwMDCDPABODqMAQAKe4BBZTlhh0AAAAASUVORK5CYII=");
    --bold-dotted: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAQAAAAD+Fb1AAAAEklEQVR42mNg+M8AAhASDUClAEXeA/1LlYqzAAAAAElFTkSuQmCC");
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    background: var(--bold-dotted), url(https://i0.wp.com/keralaspeechfoundation.com/wp-content/uploads/2019/09/file-20181001-19012-1222oat-1.jpg) 50% no-repeat;
    background-size: auto, cover;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    z-index: 2;
}
/* html structure
    <section class="container">
            <div class="background"></div>
    </section>
*/

Yeap . exactly . thanks buddy . you save my day

Mann Ross · Sep 12, 2020

frizzel said:
And to get the exact background pattern you want in a Base64 code, use Patternify.

Thank you brother that's an easy solution

Saint Gabriel · Sep 12, 2020

medw1311 said:

This seems to be the relevant code...

CSS:

.LearnAbout .grid {
    z-index: 2;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAQAAAAD+Fb1AAAAEklEQVR42mNg+M8AAhASDUClAEXeA/1LlYqzAAAAAElFTkSuQmCC);
    opacity: .75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
}

videva said:

like this ??

if like the picture above,
see code below

CSS:

/* you can adjust thin-dotted or bold-dotted in var() */
.background {
    --thin-dotted: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQYV2NkQAOMUH4DAwMDCDPABODqMAQAKe4BBZTlhh0AAAAASUVORK5CYII=");
    --bold-dotted: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAQAAAAD+Fb1AAAAEklEQVR42mNg+M8AAhASDUClAEXeA/1LlYqzAAAAAElFTkSuQmCC");
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    background: var(--bold-dotted), url(https://i0.wp.com/keralaspeechfoundation.com/wp-content/uploads/2019/09/file-20181001-19012-1222oat-1.jpg) 50% no-repeat;
    background-size: auto, cover;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    z-index: 2;
}
/* html structure
    <section class="container">
            <div class="background"></div>
    </section>
*/

frizzel said:
And to get the exact background pattern you want in a Base64 code, use Patternify.

Nice work guys.

Learnt something new from y'all!

Saiis · Sep 12, 2020

Almost 100% positive you can do this with Revolution Slider as well.

hello . How to creat overlay Like this?

Welcome to Original Babiato! All Resource are Free and No downloading Limit.. Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!

Support Our Work By Donating Click here!

Member

Member

Well-known member

New member

Member

Member

New member

Member

New member

Active member

Well-known member

Well-known member

Well-known member

Well-known member

Member

Well-known member

Member

Member

Well-known member

Active member

Similar threads

Forum statistics

Share this page

Welcome to Original Babiato! All Resource are Free and No downloading Limit..
Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!
Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!