i have that jquery code
$(function(){
$('.efectfade img:gt(0)').hide("");
setInterval(function(){$('.efectfade > :first-
child').fadeOut().next('img').fadeIn().end().appendTo('.efectfade');},
5000);
});
css
.efectfade {background-size: cover;
background-position:center;
background-repeat: no-repeat;
overflow: hidden;
width: 100%;
z-index: -1;
opacity:0.8;
height: 100%;}
and html
<div class="efectfade">
<img src="http://cdn.akamai.steamstatic.com/steam/apps/304390/ss_f49a29395ae871
76ee986dc16eddf9c4a3285231.1920x1080.jpg?t=1511961587">
<img src="
https://fsmedia.imgix.net/95/59/72/bf/16f7/467c/9232/c85b40a56d06/the
-brutal-centurion-one-of-the-two-new-heroes-playable-in-
shadow--might.jpeg">
</div>
and here is jsfiddle https://jsfiddle.net/rypz99/pyxjhfbv/
my question how to not flashing when changing image
For a brief moment both images are displaying. The image that is fading in is displayed beneath the image that is fading out. The flash you're seeing is the white background of the body.
I believe that one way you can achieve your desired effect is to have a div containing both images absolutely positioned within. Set Image1 to have a higher z-index than image2, and apply a fade animation on Image1.
$(() => {
$("#container").click(() => {
setInterval(() => {
$("#image1").fadeOut()
setTimeout(() => {
$("#image1").fadeIn()
}, 2500)
}, 5000)
})
})
#container {
width: 100px;
position: realative;
}
img {
width: 100px;
position: absolute;
top: 1;
left: 1;
}
#image1 {
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<image src="http://exchangedownloads.smarttech.com/public/content/a2/a28daee5-573f-4f1d-943d-807b0fc164f5/previews/medium/0001.png" id="image1"/>
<image src="https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/ab/5e/0a/ab5e0a5a-7e10-ba06-5ca4-1cffe0cfd753/AppIcon-1x_U007emarketing-85-220-0-5.png/200x0w.jpg" id="image2"/>
</div>
Related
I've been trying to make a simple website with a fading effect tied to scrolling the page:
$(window).scroll(function() {
var y = $(this).scrollTop();
if (y > 1000) {
$('#img2').fadeIn({});
} else {
$('#img2').fadeOut('fast')
};
if (y > 2000) {
$('#img3').fadeIn({});
} else {
$('#img3').fadeOut('fast')
};
if (y > 3000) {
$('#img4').fadeIn({});
} else {
$('#img4').fadeOut('fast')
};
if (y > 4000) {
$('#img5').fadeIn({});
} else {
$('#img5').fadeOut('fast')
};
});
body {
background: black url('https://via.placeholder.com/500x300?text=img1');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#img1,
#img2,
#img3,
#img4,
#img5 {
margin: 0px !important;
width: 100%;
height: 100%;
display: none;
object-fit: fill;
align-content: center !important;
position: fixed;
z-index: -1;
}
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--<script src="script.js"></script>-->
</head>
<body>
<img id="img1" src="https://via.placeholder.com/500x300?text=img1">
<img id="img2" src="https://via.placeholder.com/150x100?text=img2">
<img id="img3" src="https://via.placeholder.com/150x100?text=img3">
<img id="img4" src="https://via.placeholder.com/150x100?text=img4">
<img id="img5" src="https://via.placeholder.com/150x100?text=img5">
</body>
</html>
Which produces this result once I scroll "into" the next background:
As you can see, the overlapping background images don't fully cover the first background. I've been reading about CSS tags and properties but I haven't been able to work it out. Any pointers from someone more experienced than me?
Force the size of your images to cover the entire viewport with the following CSS properties:
top: 0;
bottom: 0;
left: 0;
right: 0;
If you want to keep the ratio of your images, set object-fit to cover instead of fill.
You may also want to add background-position: center to your CSS background to center the image to the viewport.
See working example here: https://jsfiddle.net/8x6Ljc4e/
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>
I have huge green div blocks (with screen height). When I hover one of them- it change it's color to yellow and the image in the block 'slidesup'. When i scroll- the block's color roll back to green (and the image 'slidesdouwn)', and after stopping the scroll- the block becomes yeallow again (and image 'slidesup' again). How can i keep div block hovered, during my scroll?
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<style>
.news-block {
width: 33%;
color: green;
height: 700px;
}
</style>
<script>
$(".news-block").hover(
function () {
$(this).css({color: 'yellow'});
$(this).find('img').slideUp(180, function() {});
},
function () {
$(this).css({color: 'green'});
$(this).find('img').slideDown(180, function() {});
}
);
</script>
ADDED. Or may be i can unhover only when an user doesnt scroll? How can i detect NOT scrolling?
$(".news-block").on('mouseover',
function () {
$(this).find('.event-info').stop().hide().css({opacity: 0});
$(this).find('.picture-block').stop().slideUp(180, function() {
$(this).find('.news-text').stop().show().animate({opacity: 1}, 500);
$(this).find('#voting-block').stop().show().animate({opacity: 1}, 500);
});
}
);
$(".news-block").on('mouseout',
function () {
--------------if not scrooll do the next ---------------
$(this).find('.event-info').stop().hide().css({opacity: 0});
$(this).find('.picture-block').stop().slideUp(180, function() {
$(this).find('.news-text').stop().show().animate({opacity: 1}, 500);
$(this).find('#voting-block').stop().show().animate({opacity: 1}, 500);
});
}
);
You can use CSS hover, which will work during scroll as well, and can slide down an image.
.news-block {
position: relative;
width: 300px;
background: green;
height: 700px;
overflow: hidden;
}
.news-block img {
position: absolute;
top: -120px;
transition: top 1s;
}
.news-block:hover {
background: yellow;
}
.news-block:hover img {
top: 20px;
transition: top 1s;
}
<div class="news-block">
<img src="http://lorempizza.com/200/120" alt="pizza">
</div>
<div class="news-block">
<img src="http://lorempizza.com/200/120" alt="pizza">
</div>
<div class="news-block">
<img src="http://lorempizza.com/200/120" alt="pizza">
</div>
http://www.chooseyourtelescope.com/
When you hover the logos buttons (moon, planet, etc...) it does background1>BLACK>background2.
I would like to get directly background1>Background2 and keep the fade effect.
(I don't know anything about Javascript, I found this code below on Stackoverflow)
Here is the code for the moon button:
HTML
<div class="top-logos-home" id="top-logos-lune-front" >
<img src="logo-moon.png" alt="MOON">
</div>
CSS
.image-home {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Frontpage.jpg);
background-size: cover;
display:inline;
top:0;
}
JQUERY
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.fadeOut('slow',function(){
$body.css('background-image', 'url("Frontpage-moon.jpg")').fadeIn('slow');
});
}, function() {
$body.css('background-image', '')
})
})
I have create a jsFiddle here : https://jsfiddle.net/h0f6y58z/
Html
<div class="top-logos-home" id="top-logos-lune-front">
<img class="image-1 image" src="http://s.hswstatic.com/gif/singapura-cat.jpg" />
<img class="image-2 image" src="https://pbs.twimg.com/profile_images/424484505915621376/EOwsjaMZ_400x400.png" />
</div>
css
.image {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Frontpage.jpg);
background-size: cover;
top:0;
}
jQuery
$(function () {
$('.image-2').hide();
$('.top-logos-home').mouseover(function () {
$('.image-1').fadeOut();
$('.image-2').fadeIn();
});
});
All this does is checks to see if the mouse enters the div and if so, we will fadeout the first image and fade in the second image. You could use first image hide and last image show if you would prefer
Like so
jQuery
$(function () {
$('.image-2').hide();
$('#top-logos-lune-front').mouseover(function () {
$('.image').first().fadeOut();
$('.image').last().fadeIn();
});
});
I found a solution by using the opacity property. Now its working perfectly.
HTML
<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" />
CSS
.hover-backgrounds {
opacity:0;
transition: opacity 0.6s linear;
top:0;
position:absolute;
background-size: 100%;
}
JAVASCRIPT
$(document).ready(function (e) {
$("#top-logos-lune-front").hover(function (e) {
$("#background-moon-front").css("opacity", "1");
}, function() {
$("#background-moon-front").css("opacity", "0")
})
});
i need some help with the following:
i have a an image placed in my body which has a hover function
<div id="wrapper">
<img style="position: absolute;" src="img/image.png" name="man" width="150" id="man_1" />
</div>
$("#man_1").hover(function () {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
},function () {
$('#hoverimg').remove();
console.log("leave mouse");
});
as you can see when im hovering the image, it appends another image which has the same top and left values as #man_1. The problem is, that when im leaving the mouse the remove does not fire because the mouse is actually on the new hoverimg
hope you get my point! Thanks
Working FIDDLE Demo
Maybe with another markup, it be easier to to this:
HTML
<div id="wrapper">
<div class="photo">
<div class="image"><img src="http://placekitten.com/200/220" /></div>
<div class="size"><img src="http://placehold.it/200x40" /></div>
</div>
</div>
CSS
.photo {
position: relative;
height: 220px;
overflow: hidden;
width: 200px;
}
.photo .image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.photo .size {
position: absolute;
height: 40px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin-bottom: -40px;
transition: margin-bottom 0.3s;
}
.photo .size.show {
margin-bottom: 0;
}
JS
$(function () {
$('.photo')
.on('mouseenter', function () {
$(this).find('.size').addClass('show');
})
.on('mouseleave', function () {
$(this).find('.size').removeClass('show');
});
});
You have to use the mouseenter and mouseout events
$("#man_1").mouseenter(
function() {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
});
$('#hoverimg').mouseout(
function() {
$('#hoverimg').remove();
console.log("leave mouse");
}
);
What if you bind the hover event to the #wrapper instead?
That works, in this FIDDLE.
Please have a look at http://jsfiddle.net/2dJAN/43/
<div class="out overout">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSuTs4RdrlAhxd-qgbGe9r0MGB9BgwFrHDvfr9vORTBEjIYnSQ8hg" />
</div>
$("div.overout").mouseover(function() {
$(this).append("<img src='http://files.softicons.com/download/system-icons/apple-logo-icons-by-thvg/png/512/Apple%20logo%20icon%20-%20Classic.png' id='hovering'/>")
}).mouseout(function(){
$('#hovering').remove();
});
I used mouseover and mouseout instead of hover.
I understood as you want to show both images on mouseover and remove the added image on mouseout. Is that correct or not?