I have two images. I would like for the second image to fade-in when I 'mouseover' over the first image and fade-out when I 'mouseout' from the first image.
How can I acomplish this using css3?
I thank you in advance for your replies.
Actually I don't know how to do this using CSS3, but using JQuery:
$('#image1').mouseover(function() {
$('#image2').fadeIn();
});
$('#image1').mouseout(function() {
$('#image2').fadeOut();
});
This is a basic solution for a few images, but you can do it dynamically depending on your needs.
Related
I have a .gif that is animated to begin from the left of the screen to a few hundred pixels to the right. The animation lasts 5 seconds and I have set it so it doesn't return to its initial spot.
What I want is for the .gif to start once the CSS animation is finished. I realise that some forums give codes for a mouseover effect so that it changes from a .jpg source of the animation to the .gif. But I can't find anything that gives you a timer instead of mouseover.
It's been a few years since I've worked on websites and I've forgotten so much, so this has been a struggle.
Any help is appreciated. Cheers.
The way to change an <img> source via javascript is fairly simple, the syntax looks like img.src = "new/source.gif".
Having the change to a GIF match up with the end of your animation can be achieved a variety of ways, but I would do it by adding the animation to your element as a class at the same time you set a time out in your javascript.
HTML
<img id="image" src="path/to/static.jpg">
JAVASCRIPT
var img = document.getElementById("image");
function photoSwitch(){
// begin your CSS animation by applying class
img.setAttribute("class", "some-animation");
// have javascript wait 5s before switching the image source
setTimeout(function(){
img.src = "path/to/moving.gif";
},5000);
}
photoSwitch();
I'm using PanZoom on a canvas element.
when i'm doing zoom in - the text on the canvas becomes blurry.. is there any way to avoid it? this is also the case with adding images to the canvas..
please see the below example:
http://jsfiddle.net/tomermiz/ba4vghnb!
ba4vghnb
Thanks!!
I am hoping to re-create a gallery just like the one of the iPhone 6s Image Gallery demo. I like how they have created each image a different size tile and that as you scroll, the image very slowly scrolls with it.
LINK HERE
I have created a similar image gallery like the example, but I am not sure how to:
1) Re-create the parallax easing on the images as it scrolls
2) Have all images fade-in on load
Could someone help?
FIDDLE HERE
There is couple ways to do this.
You could use parallax effects,transform/translateY or
$('#outer').bind('mousewheel', function (e) {
if (!(e.originalEvent.wheelDelta == 120))
The full function is in the link.
Now for fading in the picture on load(You can do on scroll as well), it depends if you want and can use jQuery, as it's the simplest.
$(window).load(function(){
$('img').not(':visible').fadeIn(1000);
});
function makeVisible() {
$('img').load(function () {
$(this).fadeIn(1000);
});
});
makeVisible();
This is just a general direction, there are more than one way to do this, I have listed what would be the simplest way to me.
I have an image at the bottom of my page (or actually, window) and it is like a rising building.
However, sometimes it overlaps page and/or footer content.
This isn't a really big problem since I just added pointer-events: none;.
But I wanted to, when hovered over the image fade it out a bit so it's more obvious you can click through. But because pointer-events: none; it doesn't even register the hover action...
Is there any way I can make it click through, but actually catching the hover-trigger?
Thanks in advance!
JSFiddle
P.S. Just wondering, is there any way to actually detect hover on only the non-transparant parts of the PNG image?
Here's my go at it: http://jsfiddle.net/tZqQc/7/
I did the hover events on the <p> tag instead, but I think I got the same effect you wanted.
The key is the jQuery code:
$("p").mouseenter(function() {
$( "#theimg" ).fadeTo( "slow" , 0.2, function() {});
});
$("p").mouseleave(function() {
$( "#theimg" ).fadeTo( "slow" , 1.0, function() {});
});
and as for the transparent hover question, you technically can do it with imagemapping.. but that's a lot of work for this picture (it's probably not worth it)!
I'm using -webkit-transform: rotate(40 deg) and it seems that the rotated element is hiding parts of elements which are on top ( not children ) of the rotated one.
I created a jsFiddle here with the code, since it will be easier to demonstrate.
Probably this is because the rotated element hides parts of other elements, but I don't want this effect. How can I fix that?
I used z-index but it doesn't help!
You're doing a 3D transform. You have 'rotateY' in the fiddle not 'rotate'.
So you're moving part of the plane in front of the buttons.
Check for yourself by changing code for the second button to
$("div.buttonB").click( function() {
$("div.background").css('-webkit-transform', 'rotateY(-190deg)')
});
This way after clicking buttonB, buttonB will be clickable but buttonA won't.
Now change -190deg to 190deg and you'll see that it works other way around.
If you want to wrap your head around 3D transformations check out this site.
http://thewebrocks.com/demos/3D-css-tester/
Watch the video and play with the controls. Hope this helps.