How can make white line effect on image

Question

How can I make this effect to use this image

I have to use this effect on many images so I can't use white effect image.

And it is possible or not?

score 5 · Accepted Answer · edited Sep 11 '14 at 12:48

5

You can try after or before Pseudo Elements to make this.

.pillar:after, .pillar:before {
  position: absolute;
  content: '';
  height: 350px;
  width: 64px;
  top: 16px;
  left: 70px;
  background-image: url(http://www.indonesia.travel/public/media/images/upload/poi/Danau%20Segara%20Anak%20-%20Gallery.jpg);
}

edited Sep 11 '14 at 12:48

Manwal

23,450
12
63
93

answered Sep 11 '14 at 12:46

Mukul Kant

7,074
5
38
53

@manwal Ooops you are right. – Mukul Kant Sep 11 '14 at 12:56
@Manwal This should work for dynamicaly added image... – web-tiki Sep 11 '14 at 12:57
@Maddy no maddy you are give perfect answer , my way of asking is wrong. – Amit kumar Sep 11 '14 at 12:58

score 1 · Answer 2 · answered Sep 11 '14 at 12:49

yes, it is possible
here you can download the plugin: http://almogbaku.github.io/imageMask/

Create image element

<img src="image.jpg" class="mySelector" />
Create mask image(black will keep stay, and the transparent will cutted of) mask
Add imageMask query to the ready event. use function .imageMask(path_to_mask)

$( document ).ready( function() { $( ".mySelector" ).imageMask( "mask.png" ); } );
You can add some callback handler

$( document ).ready( function() { $( ".mySelector" ).imageMask( "mask.png", function( $canvas ) { console.log( 'Do something here!', $canvas ); } ); } );
DONE!

Exactly same as my answer, except you have to load a plugin to manage with black background =) — Hotted24, Sep 11 '14 at 12:50

Hotted24 · Answer 3 · 2014-09-11T12:51:27.687

-1

It is basically possible in many ways.

The easiest, I think, is to create a "mask" with all the white lines, and using a transparent background. Then simply put your mask on top of your image, and voila.

EDIT

Here's your mask : Click !

EDIT 2

If you want to protect your image against copy, maybe it's better to not upload it, and just showing modified img online =)

edited Sep 11 '14 at 12:51

answered Sep 11 '14 at 12:44

Hotted24

502
3
8

I think he wants to 'protect' his images. So, doing that, won't help him that much. – Traian Tatic Sep 11 '14 at 12:45
@TraianTatic What do you mean by "protecting" image? – VeeeneX Sep 11 '14 at 12:47
@VeeeneX I think he's thinking about an anti-copy system – Hotted24 Sep 11 '14 at 12:49
@VeeeneX Making it unusable. It can be copied ofc, it's loaded in the browser but, if it's full of white lines, it can't be used while it's still visible enough to offer a good preview. – Traian Tatic Sep 11 '14 at 12:51
Edited my answer about that =) – Hotted24 Sep 11 '14 at 12:52

How can make white line effect on image

3 Answers3