Using CSS to create a transition effect for fading in and out background images

Question

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg):

If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) fading in.

The process involves:

Tracking onMouseOver and -Out Event
Executing the following code when onMouseOver occurs:

$('#mask2').css({height: $(window).height(),width: $(window).width()}).fadeIn(800, function(){
    $('#mask1').fadeOut(800);
});

For onMouseOut, a similar process is followed in reverse order (mask2/mask1)

The properties of mask1 and mask2 are defined as follows:

<div id="mask1" style="position: absolute; top: 0; left: 0; z-index:-1000; opacity: 1.0;">

<div id="mask2" style="position: absolute; top: 0; left: 0; z-index:-1000; opacity: 1.0; display:none">

However, the transition is not as smooth as desired and instead flickers. Can anyone provide assistance, please?!

javascript jquery css

Answer 1

Answer №1

Here's a solution for you to consider: http://jsfiddle.net/txezfv7d/

The premise is to have one image always visible, with a second image fading in and out based on specific conditions. This approach ensures there is no flickering, as the background image remains constant.

HTML

<div class="fader">Hover to fade</div>
<div id="mask1" class="mask"></div>
<div id="mask2" class="mask"></div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}
.fader {
    border: 5px solid blue;
    background-color: white;
    top: 0;
    right: 0;
    position: fixed;
}
.mask {
    position: absolute;
    z-index: -10;
    min-width: 100%;
    top: 0;
    left: 0;
    background-size: cover;
}
#mask1 {
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start.jpg");
}
#mask2 {
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start2.jpg");
    display: none; /* Initial state */
}

JQuery

/* Set images to full screen */
$(".mask").width($(window).width());
$(".mask").height($(window).height());

$(".fader").mouseover(function () {
    $("#mask2").stop().fadeIn(800);
});
$(".fader").mouseout(function () {
    $("#mask2").stop().fadeOut(800);
});

I've also included a set initial height for the mask divs, which can help with graceful degradation if JavaScript is disabled on the client's end.

Answer 2

Here's a solution for you to consider: http://jsfiddle.net/txezfv7d/

The premise is to have one image always visible, with a second image fading in and out based on specific conditions. This approach ensures there is no flickering, as the background image remains constant.

HTML

<div class="fader">Hover to fade</div>
<div id="mask1" class="mask"></div>
<div id="mask2" class="mask"></div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}
.fader {
    border: 5px solid blue;
    background-color: white;
    top: 0;
    right: 0;
    position: fixed;
}
.mask {
    position: absolute;
    z-index: -10;
    min-width: 100%;
    top: 0;
    left: 0;
    background-size: cover;
}
#mask1 {
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start.jpg");
}
#mask2 {
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start2.jpg");
    display: none; /* Initial state */
}

JQuery

/* Set images to full screen */
$(".mask").width($(window).width());
$(".mask").height($(window).height());

$(".fader").mouseover(function () {
    $("#mask2").stop().fadeIn(800);
});
$(".fader").mouseout(function () {
    $("#mask2").stop().fadeOut(800);
});

I've also included a set initial height for the mask divs, which can help with graceful degradation if JavaScript is disabled on the client's end.

Using CSS to create a transition effect for fading in and out background images

Answer №1

HTML

CSS

JQuery

Similar questions

Problems with Navbar rendering on multiple occasions

I wonder where the file from the HTML form download has originated

Implementing Alloy-Script/Javascript in dynamically loaded JSP files

Scope ng-repeat with Angular's $compile function is not functioning as expected

jQuery encountering TypeError while attempting to retrieve JSON data

Display a button within a table depending on the content of adjacent cells

One way to create dynamic function parameters in JavaScript is by using

The lack of vertical alignment in the table

Steps to integrate the Save as PNG functionality in Vega using a customized menu

Implementing a button callback function using Aurelia binding

Having trouble displaying the desired formatting when mapping through nested JSON in Node ES6

Incorporating style elements into text box content

The `getScript` function in jQuery is not working as expected, even though the path is accurate and the script was successfully downloaded

Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

I am encountering an issue with my function where I aim to prevent the creation of a node using duplicate coordinates

Running globally installed node modules on Windows 7 is not supported

What are some creative ways to enhance closePath() in canvas styling?

What is the best way to utilize a basic jQuery hide/show function to display everything before hiding it?

React is unable to identify the `isDisabled` attribute on a DOM element within an img tag

The dark theme in React Material UI will be specifically targeted and applied only to the drawer