We Keep Coding

Changing image on hover and back using fade

I'm trying to change an image on hover and back again.
The idea is that when I hover over an image, it fades into a different image and when my mouse leaves, the image fades back to the original.
Here is what I have tried so far, using jQuery:
<img src="https://www.shareicon.net/data/128x128/2015/08/17/86675_cat_256x256.png" />
<script>
$("img").hover(function(event) {
event.preventDefault();
console.log("hover");
$("img").fadeOut(400, function() {
$("img").attr("src", "http://files.softicons.com/download/animal-icons/meow-icon-set-by-iconka/png/128x128/cat_purr.png")
}).fadeIn(400, function() {
$("img").attr("src", "https://www.shareicon.net/data/128x128/2015/08/17/86675_cat_256x256.png")
});
});
</script>

You can actually do this with plain CSS and it would be more efficient.
Just create a div, put both images inside, absolute position so one is on top of another, and when hover apply opacity: 0 with a transition to the front image.
You can achieve this with position absolute, z-index, and hover pseudo selector.
.container{
width: 300px;
height: 300px;
position: relative;
}
img{
position: absolute;
top: 0;
left: 0;
}
.img-top{
z-index: 999999;
transition: 0.3s linear all;
}
.img-top:hover{
opacity: 0;
}
<div class="container">
<img class="img-bottom" src="https://www.cesarsway.com/sites/newcesarsway/files/d6/images/askthevet/checklist.jpg" alt="">
<img class="img-top" src="https://i.ebayimg.com/images/g/k2gAAOSwT5tWKhVS/s-l300.jpg" alt="">
</div>

How to add transition when changing img src on hover?

So I'm trying to add a different image when the original image is hovered over using javascript. The syntax I have is similar to this, which works great.
function imgHover() {
projectImage.src = '../img/img1.png';
}
function imgHover2() {
projectImage.src = '../img/img2.png';
}
projectImage.addEventListener('mouseover', imgHover);
projectImage.addEventListener('mouseleave', imgHover2);
Now I'm trying to find a way to make the image transition from one to the other (most likely using opacity.) Any suggestions on how to do this? I can't figure it out.

You can't create a transition effect changing just the src tag of an image.
One way of doing this is to create two image that is positioned absolute on top of each other with the top one having an opacity of 0.
If you need to change the hover image dynamically, you can still do that through javascript.
.image-wrapper {
position: relative;
}
.image-hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-out;
}
.image-hover:hover {
opacity: 1;
}
<div class="image-wrapper">
<img src="http://via.placeholder.com/350x150?text=normal" class="image" alt="normal" />
<img src="http://via.placeholder.com/350x150?text=hover" class="image-hover" alt="hover" />
</div>

How to animate image over other image in Css or Javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Lets say First image is black & white.
Second image is colored.
After some timeout B/W image should change to colored image..with animation
just like loading progress bars? how can I do this using Css or JavaScript ?
[Added for clarity from a comment by the OP, below]
OP: is it possible with some slow linear kind of animation ?? like filling
water in glass..color filling in b/w image ?

first place two images above each other using position: absolute;. With background images you can do it like this:
<div class="container">
<div class="image1"></div>
<div class="image2" id="image_resize"></div>
</div>
CSS:
.container {
position: relative;
width: 300px;
height:200px;
}
.image1 {
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://images.freeimages.com/images/previews/cf6/bird-1394216.jpg);
background-repeat: no-repeat;
}
.image2 {
position: absolute;
height: 100%;
background-image: url(http://images.freeimages.com/images/previews/4f3/apple-1322812.jpg);
background-repeat: no-repeat;
}
To animate the second image, the easiest way is to use jquerys animate. With pure javascript you could do something like this:
var percent = 0; // this will count from 0 to 100, defining the with in percent
/* with setinterval you can call a function periodically, in this example every 50 milliseconds */
var myInterval = window.setInterval(function() {
/* find the image that should get resized by id */
var img = document.getElementById('image_resize');
/* set the with of the image */
img.style.width = percent+"%";
/* increment by 1 percent */
percent ++;
if(percent > 100) {
/* when 100% is reached, stop the interval */
clearInterval(myInterval);
}
}, 50);
Here is a working jsfiddle: https://jsfiddle.net/c51u6r8t/

You can put the black-white image on top of the colored one at full opacity and simply fade out the black-white image when you want.
setTimeout(function() {
document.getElementById("container").className = "revealed";
}, 500);
#container {
position: relative;
}
#container .overlay {
position: absolute;
top: 0px;
left: 0px;
transition: opacity 1.5s ease-in-out;
}
#container.revealed .overlay {
opacity: 0;
}
<div id="container">
<img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2003/10/soho_image_28_october_2003/10098404-2-eng-GB/SOHO_image_28_October_2003_node_full_image_2.jpg">
<img class="overlay" src="http://dawn.jpl.nasa.gov/multimedia/images/dawn-image-070911.jpg">
</div>
Fiddle

Second attempt
I understand better what you are trying to achieve now. This can be achieved with an animation on an ::after pseudo-element.
Working Example:
div {
position: relative;
width: 190px;
height: 190px;
background-image:url('http://placekitten.com/190/190');
}
div::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 190px;
background-image:url('http://placekitten.com/190/190');
opacity: 0;
filter: grayscale(100%);
animation: waterfill 5s linear;
}
#keyframes waterfill {
0% {height: 190px; opacity: 1;}
20% {height: 190px; opacity: 1;}
100% {height: 0; opacity: 1;}
}
<div></div>
First attempt:
You can use a CSS #keyframes animation like this:
img {
width: 190px;
height: 190px;
filter: grayscale(0%);
animation: colorImage 5s linear;
}
#keyframes colorImage {
0% {filter: grayscale(100%);}
80% {filter: grayscale(100%);}
100% {filter: grayscale(0%);}
}
<img src="http://placekitten.com/190/190" />
The animation takes 5 seconds in total.
For the first 4 seconds, the image is black and white.
During the last second, the image transitions to full color.

I hope this code helps
<script type="text/JavaScript">
var picCount=0; // global
var picArray= ["Header1.png","Header1.jpg"]
// Replace your original image names here
// gets next picture in array
function nextPic()
{ // check if adding 1 exceeds number of pics in array
picCount=(picCount+1<picArray.length)? picCount+1 : 0;
// build the img to write to page using the new pic reference
var build='<img border="0" src="'+picArray[picCount]+'" width="200" height="200">';
document.getElementById("imgHolder").innerHTML=build;
// repeat this after a puse of 2000ms (2sec).
setTimeout('nextPic()',2000)
}
</script>
Add this to your html page
<body onload="setTimeout('nextPic()',2000)">
<div id="imgHolder">
<img border="0" src="Header1.jpg" width="300" height="300">
</div>

If I assumed correctly, the first image is desaturated version of the second image so only one image is needed here: the colored one. To turn it into a bw image simply use grayscale filter:
img.desaturate {
filter: grayscale(100%);
}
and add this class to your image:
<img id="myimage" src="image.jpg" class="desaturate">
if you want an "animation" you can forget the classes and dynamically add the style via jQuery:
$("#myimage").css("style","filter: grayscale("+(bytesLoadeed/bytesTotal*100)+"%);");

Change function element IMG to DIV background

I have static HTML structure and my background images are fullscreen every page. Added a img tag after tag:
<img src="img/about.jpg" id="static_bg" alt="">
And CSS:
#static_bg { position: fixed; top: 0; left: 0; z-index: -2;}
.staticbgwidth { width: 100%; }
.staticbgheight { height: 100%; }
And final, my JS code:
$(window).load(function() {
var theWindow = $(window),
$bg = $("#static_bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('staticbgheight');
} else {
$bg
.removeClass()
.addClass('staticbgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
Yeah, it's working good. But I want, remove my IMG and add a DIV background. When I change this, don't working JS.
How can I fix it? Thank you.

Try to use background property in CSS like,
#static_bg { background:url('img/about.jpg') ;
position: fixed; top: 0; left: 0; z-index: -2;}
And Div like,
<div id="static_bg"></div>
You can use background-size:cover and apply background on body if above not works see this demo

<div class="your_div"></div>
.your_div {
background:url('img/about.jpg') no-repeat;
background-size:cover;
}

set an ID to your image like this:
<img id="background-img" src="img/about.jpg" id="static_bg" alt="">
get your background url by this code:
var $bg-url = $("#background-img").attr("src");
then remove your image by css like this:
$("#background-img").css("display","none");
then set background for that element that you want. in this case $("#static_bg")
$("#static_bg").css("background-image",'url('"+$bg-url+'")');
jsFiddle is here

jquery slideshow using background images

I have a div which currently has a static background image.
I need to create a slideshow of background images for this div.
I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.
I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.
Does anyone know of a good way to do this using jquery??
Here's some code which fades out/in but fades out the contents of the div too.
$("#slideshow").fadeOut(5000, function(){
$("#slideshow").css('background-image','url(myImage.jpg)');
$("#slideshow").fadeIn(5000);
});

HTML:
<div class="slideshow"></div>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
jQuery
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
jsfiddle Demo

How about adding a thumbs pagination list, to update the background image on click, and then, a second or two, and it starts fading in and out with the next bg img automatically?
HTML:
<div class="slideshow">
<h1>Text</h1>
<input type="button" value="Hello" />
</div>
<ul>
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50/123456"></li>
<li><img src="http://placehold.it/50x50/dbca98"></li>
</ul>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
ul {position: absolute; top: 125px; left: 75px;}
li {
float: left;
border: 1px solid #000;
margin: 15px;
}
Javascript:
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
See it all together at http://jsfiddle.net/tatygrassini/R4ZHX/75/.

Instead of just changing the background image, you could first call
fadeOut()
then change source, and then call
fadeIn()
something like...
$('#image').fadeOut(500, function() {
$(this).attr('src', 'new-image.png')
.load(function() {
$(this).fadeIn();
});
});
To use a variety of images, there are a number of solutions, but you could simply iterate through a list of them.

You can create an positioned absolutely and with a slider plugin change the images contained in the div. Otherwize you have to sprite the background. I achieved this with the Jquery Tools tabs plugin.
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();

Here is a solution that not only addresses your problem, but will also solve some other problems as well. Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
Most importantly, this approach will work in IE6-8 without screwing up the font aliasing of elements you may have on the div.