ngrmm

manipulate image or background-image

Recommended Posts

is there a way to output jpegs with a color-overlay?

i'd like to have a transparent image with a black background. the admin should be able to set the opacity.
unfortunately i'm not able to change the dom-elements or add some.

so, i have a div with a background-image and a field where i can set a number (0 – 100). is there a way to let PW create an image with some kind of a color-overlay to darken an image?
 

Share this post


Link to post
Share on other sites

Ive done something simular recently, well not sure if this is what u looking for:

Simple markup (number in a class represents opacity level)

<div class="tm-overlay-dark-60">
  <img src="" />
</div>

If u want to use it with background image, just need to define height

<div class="tm-overlay-dark-60" style="height:500px;background:url(./myimage.jpg) center center no-repeat;backgroudn-size:cover;">
</div>

I usually use uikit framework and less

@tm-overlay-dark-bg: #000;
@tm-overlay-light-bg: #fff;

/**
 *  TM Overlay BG
 */
[class*='tm-overlay-'] {
    position:relative;
}

[class*='tm-overlay-']:before {
    content: "";
    display:block;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: fade(@tm-overlay-dark-bg, 60%);
    z-index:0;
}

    /**
     *  Dark
     */
    [class*='tm-overlay-10']:before,
    [class*='tm-overlay-dark-10']:before {
        background: fade(@tm-overlay-dark-bg, 10%);
    }
    [class*='tm-overlay-20']:before,
    [class*='tm-overlay-dark-20']:before {
        background: fade(@tm-overlay-dark-bg, 20%);
    }
    [class*='tm-overlay-30']:before,
    [class*='tm-overlay-dark-30']:before {
        background: fade(@tm-overlay-dark-bg, 30%);
    }
    [class*='tm-overlay-40']:before,
    [class*='tm-overlay-dark-40']:before {
        background: fade(@tm-overlay-dark-bg, 40%);
    }
    [class*='tm-overlay-50']:before,
    [class*='tm-overlay-dark-50']:before {
        background: fade(@tm-overlay-dark-bg, 50%);
    }
    [class*='tm-overlay-60']:before,
    [class*='tm-overlay-dark-60']:before {
        background: fade(@tm-overlay-dark-bg, 60%);
    }
    [class*='tm-overlay-70']:before,
    [class*='tm-overlay-dark-70']:before {
        background: fade(@tm-overlay-dark-bg, 70%);
    }
    [class*='tm-overlay-80']:before,
    [class*='tm-overlay-dark-80']:before {
        background: fade(@tm-overlay-dark-bg, 80%);
    }
    [class*='tm-overlay-90']:before,
    [class*='tm-overlay-dark-90']:before {
        background: fade(@tm-overlay-dark-bg, 90%);
    }

    /**
     *  Light
     */
    [class*='tm-overlay-light-10']:before {
        background: fade(@tm-overlay-light-bg, 10%);
    }
    [class*='tm-overlay-light-20']:before {
        background: fade(@tm-overlay-light-bg, 20%);
    }
    [class*='tm-overlay-light-30']:before {
        background: fade(@tm-overlay-light-bg, 30%);
    }
    [class*='tm-overlay-light-40']:before {
        background: fade(@tm-overlay-light-bg, 40%);
    }
    [class*='tm-overlay-light-50']:before {
        background: fade(@tm-overlay-light-bg, 50%);
    }
    [class*='tm-overlay-light-60']:before {
        background: fade(@tm-overlay-light-bg, 60%);
    }
    [class*='tm-overlay-light-70']:before {
        background: fade(@tm-overlay-light-bg, 70%);
    }
    [class*='tm-overlay-light-80']:before {
        background: fade(@tm-overlay-light-bg, 80%);
    }
    [class*='tm-overlay-light-90']:before {
        background: fade(@tm-overlay-light-bg, 90%);
    }

Maybe u need to change :before z-index if you dont use image as background image

  • Like 1

Share this post


Link to post
Share on other sites

thx @lokomotivan

actually i was able to append a div with javascript and to use it as a overlay.
 

ps: i also found this 

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.