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>
Related
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 :)
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.
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.
I have taken and essentially lightly modified a jQuery image slider to operate how I want, specifically one called: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery.
I am currently attempting to link this slideshow to a separate div below that contains image specific text, I have achieved this in a very simple manor by hyper linking each thumbnail to load the content I want for each image.
Ideally I would like this to happen by using the next and previous controls for the slideshow but have tried multiple solutions without success. My current attempt loads the text for image 1 and image 2 but gets stuck from there onwards.
The html, css and JavaScript for my attempt can be found at http://jsfiddle.net/v9vf9/ (The result does not appear correctly as all my files are for the moment stored locally)
I am sure that what I am trying to achieve is not very complicated but seems to be beyond my ability, I appreciate any advice, help or solutions to succeed with this!! And look forwards to improving my knowledge.
Thank you in advance, Carl
So, as suggested in the comments
http://jsfiddle.net/lollero/Sw4y8/
It's a bit easier to put the text inside the animated slides so that they are animated with the images automatically and most importantly give #slides element a bigger height where the text can fit in.
HTML:
<div class="slide">
<img src="http://placekitten.com/g/500/230" alt="" />
<div class="text">Text</div>
</div>
</div>
<div id="thumbnails">Thumbnails</div>
CSS:
#slides {
height: 550px; /* or what ever amount is big enough to fit the text there too */
float: left;
position: relative;
z-index: 5;
}
#thumbnails {
float: left;
clear: both;
position: relative;
z-index: 10;
top: -110px;
}
.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }
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.