0

I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.

Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).

I've had a go at trying this with opacity but I don't want the background to be visible behind the image

Improve this question
15
  • 2
    Add an overlaying element that is white, and fade it in, or a white element behind the image etc. Commented May 17, 2014 at 16:24
  • 1
    hmm suppose that might be easier actually Commented May 17, 2014 at 16:25
  • You can just have the src change to a base white image. Overlaying elements would be cumbersome and unnecessary. Commented May 17, 2014 at 16:27
  • @SpencerWieczorek - You can't really fade one image into itself ? Commented May 17, 2014 at 16:29
  • 1
    @M'sieurToph': jQuery would only be used to toggle a class, like "active". From there, the ::after pseudo-element overlays a white block (which is only white when class active is on) img::after { content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:transparent; z-index:1; -webkit-transition:all 1s ease; transition:all 1s ease; } and img.active::after { background:white; } -- note that instead of using class active, you could instead just use :hover to make the image turn white on or off mouse hover. Commented May 18, 2014 at 19:47

4 Answers 4

Reset to default
1

Psuedo-element Solution

You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).

CodePen Demonstration

HTML

<div class="whiteclicker"> <img src="http://lorempixel.com/400/200" alt=""/> </div>

SCSS

@import "compass/css3/transition"; body { background: gainsboro; text-align: center; } .whiteclicker { display: inline-block; position: relative; &::after { content: ""; display: block; position: absolute; top:0; left:0; right:0; bottom:0; background: white; opacity: 0; @include transition(opacity 1s ease); } &.active::after { opacity: 1; } }

JS

$('.whiteclicker').click(function(){ $(this).toggleClass('active'); });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :

What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?

See the fiddle.

$("#myImage").click(function(){ $(this) .parent().css({position:'relative'}).end() .after($('<div>') .hide() .css({position:'absolute' , top: $(this).position().top , left: $(this).position().left , width: $(this).width() , height: $(this).height() , background: '#FFF' }) .fadeIn('fast') .on({ click : function(e){ $(this).fadeOut('fast', function(){ $(this).remove();}); } }) ); });

Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.

@Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)

Improve this answer

2 Comments

You're right, that is a much better solution. And works with multiple images; I guess my jQuery must be rusty, I forgot you can do that.
This still isn't a wholly professional solution -- but it will do fine, so long as it works -- performance issues will likely be negligible. Ideally, CSS should be controlling the animation here (via transitions), JavaScript should be only there to trigger it (by toggling a class).
0

You might want to try having two images stacked on each other. See this:

<script type="text/javascript"> var image1 = '<img class="images" src="Image 1" onClick="switch();" />'; var image2 = '<img class="images" src="Image 2" onClick="switch();" />'; var currentImage = 1; function switch(){ if(currentImage==1){ currentImage++; document.getElementById("image").innerHTML = image2; } if(currentImage==2){ currentImage--; document.getElementById("image").innerHTML = image1; } } </script> <style> .images{ position:fixed; top: 0; left: 0; } </style> <img class="images" src="Black image" /> <div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>

For the fade I'm just gonna see how you could do it.

EDIT:

<script type="text/javascript"> var fadecount = 100; function fade() { document.getElementById("imageToFade").style.opacity = fadecount; fadecount--; if(fadecount==0){ clearTimeout(fade); } } function start_fade(){ var fade = setTimeout(fade(), 10); } </script>
Improve this answer

1 Comment

Use two different images is not really good choice. It makes the code heavier.
-1

With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="

just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...

Improve this answer

2 Comments

What about the transition from one to the other ?
How is this negative one if it works and answers the questions smh

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.