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 :)
Related
I have four images stacked on top of each other. On hover, the visible image zooms-in and fades-out to reveal the image beneath.
I have two problems that I'm trying to solve:
1st. as the image scales, it bleeds outside of the containing div. I want the image to scale but, keep the image area outside of the div hidden.
2nd. Once the first image is fully faded, I want the now visible image to do the same as the first and reveal the image beneath. Currently it just sits there with the mouse pointer hovering over it.
So, I have a relatively positioned container that holds 4 absolutely positioned images. One of which, I have wrapped in another div to try to keep the overflow of the image hidden (this dosn't work).
I have used CSS to transform both the opacity and scale over a duration of 2s, which works for the first image, but not the subsequent image beneath it.
What I am trying to do is to reproduce a presentation that I put together (on Adobe Spark) as a website. I have spent a couple of weeks researching the kinds of effects that I am after, but only seem to come up with various JavaScript/jQuery plugins.
Is what I am trying to do above not simple enough to use just CSS transforms and transitions? My idea was to get these sorted and then look at invoking the styles when a user scrolls up/down the website using JavaScript preferably, or jQuery if that proved too complicated.
/* create a relatively positioned wrapper
fpr the images */
.img-wrapper {
position: relative;
width: 25vw;
z-index: 10;
}
/* fit absolute container to top left of img-wrapper.
Fill the width of the wrapper */
.stack {
position: absolute;
width: 100%;
height: fit-content;
}
/* stack the image centered in the img-wrapper */
.img-1 {
z-index: 4;
top: 0;
left: 50%;
transform: translate(-50%);
}
.img-1:hover {
opacity: 0;
transform: translate(-50%) scale(1.25);
transition-duration: 2s;
}
.img-2 {
z-index: 3;
top: 0;
left: 50%;
transform: translate(-50%);
}
.img-2:hover {
opacity: 0;
transform: translate(-50%) scale(1.25);
transition-duration: 2s;
}
.img-3 {
z-index: 2;
top: 0;
left: 50%;
transform: translate(-50%);
}
.img-3:hover {
opacity: 0;
}
.img-4 {
z-index: 1;
top: 0;
left: 50%;
transform: translate(-50%);
}
.img-4:hover {
opacity: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8" lang="eng">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" href="styles/styles.css">
</head>
<header>Header Text</header>
<main>
<h1>4 Images placed Over Each Other</h1>
<div class="img-wrapper">
<!-- 'overflow: hidden' to stop image bleed outside of div
which doesn't work :( -->
<div style="overflow: hidden;">
<img class="stack img-1" src="https://images.unsplash.com/photo-1502359521992-f86fd62e12dd" alt="african chillites">
</div>
<img class="stack img-2" src="https://images.unsplash.com/photo-1509085051020-b0707cdec216" alt="african chillites">
<img class="stack img-3" src="https://images.unsplash.com/photo-1526179969422-e92255a5f223" alt="indian chillies" alt="african chillites">
<img class="https://images.unsplash.com/photo-1518843875459-f738682238a6" alt="fresh veg" alt="african chillites">
</div>
</main>
<body>
</body>
</html>
As I have tried to describe, I expected the transform/transition to cascade down the stack as each image beneath is fully revealed. This is clearly not the case and only works for the very top image.
As for the image bleeding outside of the div as it scales, I'm not sure what else to try other than overflow: hidden; on the container, which doesn't work. If i apply that style to the class="img-wrapper div, the images just dissappear!
Any help or suggestions as to where to go with this would be much appreciated.
Update:
I added working links to images so that there is a usable demo of the problem I am trying to solve.
Many thanks to all that can contribute.
Addendum
I thought I would add this working example to clarify what I am trying to achieve: Adobe Spark example. This works on real mobiles that I have tried (various Samsung touch screens) and also Chrome & Firefox 70.0.1 dev tools responsive view but, it does not work in Firefox Developer edition 71.0b9 (64-bit) responsive view.
My main hurdle is the stacked images that zoom/fade-in-out as the user scrolls. I tried Skrollr with great success on desktop, but there's no way to make it work on mobile.
If there are any suggestions for alternative plugins/libraries that could achieve my goals, I would be greatfully thankful to hear of them. I think attempting to my own JavaScript to do this is one step too far for my programming abilities ot the moment! :-/
Thanks for reading.
So as you can tell by the title, I'm trying to load an image above/onto another. It's kind of hard to use with this very amateur setup I have. Basically what I'm trying to do is load an image into the same position as the one that's being hovered. Hard to explain, but I think you might understand.
The code is here: Pastebin.com
What it currently does is create a map of sorts using images. Once hovered over, they dim out and display the realname of the image. What it doesn't do yet is load a new image above the currently hovered-over image if that makes sense. Hopefully someone can help. You can view its current status here: Sinnoh.php
(Scroll right to find some images)
You can have the effect you want by placing the images on top of another, and adjusting their opacity values on hover. A simple transition will give it the fade in/out look you want.
img {
height: 600px;
width: 200px;
}
.alt-img {
opacity: 0;
}
.image-container:hover > .main-img {
opacity: 0;
}
.image-container:hover > .alt-img {
opacity: 1;
}
img {
transition: 1s;
position: absolute;
}
<div class="image-container">
<img class="main-img" src="http://gogojjtech.com/misc/map/route204.png" />
<img class="alt-img" src="http://gogojjtech.com/misc/map/route205.png" />
</div>
I just want to change background-image of body with a fadeOut and replace the second image with fadeIn.
But I get the following error:
Uncaught TypeError: Object url(file:///C:/Users/.../p1bg_cutted.png) has no method 'fadeOut'
$('body').css("background-image").fadeOut('slow',function(){
$("body").css("background-image",
"url(Images/son_componentler/p2bg_cutted.png)").fadeIn('slow')
});
I can change the image without fadein/fadeout but I guess in that case I am making a sytax mistake.
You code fails because $('body').css("background-image") returns a string -- the value of the CSS background image property; not a jQuery object.
Secondly, your code will fade in/fade out the entire body. Background image itself can not be faded.
I suggest that you use an img positioned behind content and fade it.
Instead of fading out the body and then fading it back in. You can get the exact same effect by fading in a masking div that covers the whole screen, change the background-image of the body, and then fading out the masking div. Something like this:
HTML - Add this line anywhere in your HTML
<div id="mask" style="position: absolute; top: 0; left: 0; background: black; display: none;"></div>
JavaScript
$('#mask').css({height: $(window).height(), width: $(window).width()})
.fadeIn('slow', function(){
$('body').css('background-image', 'url(Images/son_componentler/p2bg_cutted.png)');
$('#mask').fadeOut('slow');
});
See a working example here
UPDATE
In one of my projects I wanted to fade everything to black and then back in with a different image which is what my original code did. If you want to keep the content visible, you don't have to change much. Just have a div in the background with your image. Then apply the masking technique over only your background image.
HTML
<div id="img" style="position: absolute; z-index: -99; top: 0; left: 0;"></div>
<div id="mask" style="position: absolute; z-index: -98; top: 0; left: 0; background: white; display: none;"></div>
JavaScript
$('#mask').css({height: $(window).height(), width: $(window).width()})
.fadeIn('slow', function(){
$('#img').css('background-image', 'url(http://www.jsfiddle.net/img/logo.png)');
$('#mask').fadeOut('slow');
});
See a working example here
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 :)
I'm relatively new to Web development and wouldn't even know where to start in coding a JavaScript that fades a grayscale thumbnail image into a color thumbnail image on mouseover, and vice versa on mouseoff (<--or whatever this is called).
I've looked all over and can't find a script that does this. Is this possible? Could I use jQuery to do this? Other thoughts?
I think all you could do is load two thumbnails into a container at once, with the black and white laying over top of the colour. Then, you could use jquery to fade the opacity of the to thumbnail to 0.0. Here is a working example (it just uses a click to change it once, but I'll leave the mouseover / mouseout to you - you may want to speed up the animation):
some html:
<div class="container">
<img src="blackandwhite.jpg" class="bw" />
<img src="colour.jpg" class="colour" />
</div>
some css:
.container { position: relative; }
.container img { position: absolute; }
.bw { z-index: 101; }
.colour { z-index: 100; }
some jquery:
$(function() {
$(".bw").click(function() {
$(this).animate({ opacity: 0.0 }, 800);
});
});
The best way to do this would be to actually have two versions of the image. One that's grayscale and one that's color. To keep it strictly within javascript and html, I don't believe there's any other way than with the two image method. Flash, Silverlight, and maybe even HTML 5, can do it easily.
Do you really want to fade, or just to swap?
Typically the swap is done via CSS
<a class="btn"></a>
and the CSS
a.btn {
background: url(../images/button-image.png) no-repeat 0 0;
width: 110px;
height: 16px;
margin: 10px 0 0;
}
a.btn:hover {
background-position: 0 -16px;
}
In this case there's a little performance improvement going on where button-image contains both images vertically stacked, and the css is sliding the background image around, but it's the same idea. It's a performance enhancement because the browser only needs to download 1 image, not 2.