We Keep Coding

onmouseover change image smoothly

I have an image switching with another one when hovering with mouse, it works well, but I want to make it change smoothly.
Here's my code :
<img src="/images/doubleimgindex.png" class="w-100"
onmouseover="this.src='/images/doubleimgindex2.png'"
onmouseleave="this.src='/images/doubleimgindex.png'" />
I can't use div for this purpose, that's why I'm asking for help, is it possible?

If you want to fade between the images, you need to have two images on top of each other and fadein/out the upper one:
.container {
position: relative;
}
.upper-image {
position: absolute;
top: 0;
left: 0;
transition: opacity 1s;
opacity: 0;
}
.upper-image:hover {
opacity: 1;
}
<div class="container">
<img src="https://picsum.photos/id/100/400/300">
<img src="https://picsum.photos/id/200/400/300" class="upper-image">
</div>
In Action: https://codepen.io/theshark/pen/rNVVeLO
The fading can be done completely in css as seen in the example :)
The upper image is positioned on top of the lower image via position absolute and completely transparent. On hover the image opacity is scaled to 1 and the image fades in.
If you have further questions about the code, please don't hesitate to ask :)

Position absolute image only shows half during animation

I am building a component that is supposed to slide up and down depending on some user action. The component must hold an image in the top which is positioned absolute, on a wrapper which is positioned fixed.
Everything is fine and dandy, however during the slide up and down effect, for which I am using jQuery, only the bottom half of the image is shown.
When the animation is over, the image is shown as it's supposed to do.
I have some CSS which looks like:
.wrapper {
background: #fff;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
height: 100px;
display: none;
}
.picture {
position: absolute;
top: -40px;
border-radius: 100%;
left: 50%;
transform: translateX(-50%);
}
I've made a fiddle here: https://jsfiddle.net/7sg3x6zn/
Any ideas on how to avoid this?

As others mentioned, you need to override the overflow: hidden that is set on the callback of both slideDown() and slideUp().
You can do that without changing your stylesheet, if you alter your code like that:
$(function() {
$('#show').click(function(event) {
event.preventDefault();
$('.wrapper').slideDown().css('overflow','visible');
});
$('#hide').click(function(event) {
event.preventDefault();
$('.wrapper').slideUp().css('overflow','visible');
});
});

add
overflow: initial !important;
to wrapper class like the example
https://jsfiddle.net/RACCH/ug7szyzv/
this is happening because the jquery function adds overflow:hidden during the animation..

The animation slideDown, and slideUp uses overflow: hidden on the wrapper element doing the animation.
And because of the negative top position of the images is outside the wrapper. So to avoid the image being cut in half delete the line: top: -40px
Hope this make sense :)

How can I replicate this image zoom animation effect in jQuery/javascript?

When clicking on the thumbnail on the image on this site: http://www.grouprecipes.com/138587/banana-oatmeal-chocolate-chip-cookies.html, it expands and loads the original (full-size) version of the image.
I think they are using prototype or something similar. I've been looking around on here and have only mainly found examples that just increase the size of the original image and don't actually load another version of the image (like the linked example does).
Anyone care to help me figure out what techniques I should use for this? Combination of CSS3 and some .animate()?

Here is a simple example using CSS3, a bit of JavaScript.
Explanation:
Initially both the thumbnail and the enlarged version of the picture are placed on the same space using absolute positioning.
The enlarged version is not loaded until the thumbnail is clicked because the enlarged img tag doesn't have any src to begin with. It is assigned dynamically through the JS.
The image move to a different position is achieved using the translateX and translateY options which moves the absolutely positioned enlarged version of the image by the mentioned no. of pixels in both X and Y axes.
JavaScript is used to add a show class to the enlarged picture which triggers the transition effect and also set the src of the img tag to the newer/bigger image.
The enlarged version would return back to its original position when clicked anywhere on the enlarged image.
The JS code is written using class name instead of id just in case you need multiple such thumbnails on the same page. If that is the case, you may want to remove the [0], put it inside a for loop and replace the [0] with the counter variable. Also the enlarged image's source for each such thumbnail image can be maintained through a key-value pair mapping.
The z-index: -1 on the image originally (prior to adding .show through JS) is to make sure that it stays in the background and doesn't hinder the click on the thumbnail.
Points to note:
transform, translateX and translateY are all CSS3 properties/functions and hence have no support in IE8 and less. For older versions of Chrome, Firefox, Opera and Safari, browser prefixes like -webkit-, -moz would be required.
The classList.add and classList.remove functions are HTML5 standard and are not supported in IE9 but they equivalent IE9 code to add or remove class (like className += ..) can be easily done.
var images = {'img1': 'http://placehold.it/400/400'};
document.getElementsByClassName('thumbnail')[0].onclick = function(){
document.getElementById('enlarged').src = images[this.id];
document.getElementById('zoomed').classList.add('show');
}
document.getElementById('enlarged').onclick = function(event){
if(event.target != document.getElementsByClassName('thumbnail')[0])
document.getElementById('zoomed').classList.remove('show');
}
.container{
position: relative;
}
.thumbnail{
height: 200px;
width: 200px;
}
#zoomed .enlarged{
opacity: 0;
z-index: -1;
min-height: 200px;
min-width: 200px;
height: 200px;
width: 200px;
position: absolute;
transition: all 1s;
left: 0px; top: 0px;
}
#zoomed.show .enlarged{
opacity: 1;
z-index: 2;
height: auto;
width: auto;
min-height: 400px;
min-width: 400px;
transform: translateX(200px) translateY(200px);
}
<div class="container">
<img src="http://placehold.it/200/200" alt="" class="thumbnail" id='img1'/>
<div id='zoomed'>
<img src="" alt="" class="enlarged" id='enlarged'/>
</div>
</div>
Additional Resource:
Here is a good article on how to pre-load images (the enlarged versions if needed) using CSS + JS, only JS and AJAX.

Added css to a div containing img, makes it unclickable in jQuery

I'm using jQuery Mobile, to create a small mobile app. I have a page which includes just a GIF. Though the GIF can be clickable, to move to the next page. But the point is that the GIF is not full screen in some devices, so I added some CSS to make it full screen, meaning to stretch it, which works, but then it makes the div (or GIF) unclickable. So I cannot click it to move to the next page, you need to wait for the animation to finish.
Here is how the page is defined in HTML:
<div id="correctGIF" data-role="page" data-add-back-btn="false">
<img src="images/Correct1.gif">
</div>
I added this CSS:
#correctGIF {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: -1;
}
#correctGIF > img {
width: 100%;
height: 100%;
}
Is there any way, how can I stretch the GIF to make it cover the whole screen, without making it unclickable?

It is z-index problem. Because you set z-index: -1; so that the div is unclickable. Change z-index to postive integer or remove z-index in css

How do i mask images on hover?

I have 9 images aligned in 3 rows. Each row has 3 images.The images popup on hover. Except the image which popups the rest of images should be darkened. Since i have yellow background if i try to reduce opacity of the images , the images appear dim yellow . So i can't reduce opacity. Any other solution . Please help
My Sample Code
<div id="content">
<ul>
<li> <div class="imagHolder"> <img src="my-image.jpg" width="320" height="240"> </div> </li>
< /ul>
</div>
CSS
#content {
background : yellow;
width : 940px;
height : 500px;
}
Even if i set background color black to the wrapper imagHolder , the images appear dim yellow on hover
Jquery code
jQuery(document).ready(function() {
jQuery('.imagHolder').hover (function() {
jQuery('.imagHolder').css({'opacity' : '0.5'});
},
function(){
jQuery('.imagHolder').css({'opacity' : '1.0'});
}
}

You can set background-color: #000 on the image elements -- then you should be able to reduce opacity to darken the images.
As pointed out in the comments, you need to set the background color on a wrapper around the image. Here is a working example demonstrating the technique: http://jsfiddle.net/UWJhM/
The problem with the code in your example is that you're changing the opacity of the wrapper div rather than the opacity of your image. Set a black background on your image wrapper, and then change the opacity of the image only, and you should be fine.
On a side note, JavaScript isn't needed for this effect. You could substitute your jQuery code with CSS rules that change the opacity on hover, and still get the same effect. Again, see the jsfiddle mentioned above where this technique is illustrated.

Tried it the other way? Make a div block on top of the image as such:
<div class="imgHolder">
<img src "image01.jpg" width="100" height="100"/>
<div class="imgMask" ></div>
</div>
of course u have to apply correct css as such:
.imgMask {
width:100px; height:100px; position: absolute; top: 0; left: 0; background-color: #000; display: none;
}
.imgHolder {
position: relative;
}
just .show() the imgMask when necessary :)