Creating a stunning visual effect by using CSS to fade images in and out

Question

Creating a stunning visual effect by using CSS to fade images in and out

My current issue involves a UX switch that controls the effect on and off of pictures.

http://plnkr.co/edit/JcPXpP0jE5GysBbZbrkp

I am trying to achieve a smooth fade transition from one picture to another over 1 second, but I am encountering difficulties making it work using CSS. Any assistance on this matter would be greatly appreciated. Thank you.

.off 
{ 
    opacity: 1; 
    -moz-transition: opacity 1s ease-in; 
    -o-transition: opacity 1s ease-in; 
    -webkit-transition: opacity 1s ease-in; 
    transition: opacity 1s ease-in; 
    position:relative; 
    z-index:2; 
}

css switch-statement toggle

Answer 1

Answer №1

It seems like the lack of animation is due to the swapping of the img src attribute, which cannot be animated. To achieve a smoother transition, I recommend loading both images, stacking them one behind the other, and animating the opacity of the image in front. You can see an example implementation in this plnkr: http://plnkr.co/edit/7uakbxwZETNnBiOAOfys?p=preview

Answer 2

It seems like the lack of animation is due to the swapping of the img src attribute, which cannot be animated. To achieve a smoother transition, I recommend loading both images, stacking them one behind the other, and animating the opacity of the image in front. You can see an example implementation in this plnkr: http://plnkr.co/edit/7uakbxwZETNnBiOAOfys?p=preview

Answer 3

Answer №2

Experience the magic of jQuery fade effects by creating a .js file and linking it to your .html file with this code:

    $(document).ready(
        $('#yourSwitch').click(
           $('#yourImage').fadeOut();
        );
    );

For a fade-in effect, simply reverse the process:

   $(document).ready(
        $('#yourSwitch').click(
           $('#yourImage').fadeOut();
        );
    );

Answer 4

Experience the magic of jQuery fade effects by creating a .js file and linking it to your .html file with this code:

    $(document).ready(
        $('#yourSwitch').click(
           $('#yourImage').fadeOut();
        );
    );

For a fade-in effect, simply reverse the process:

   $(document).ready(
        $('#yourSwitch').click(
           $('#yourImage').fadeOut();
        );
    );

Creating a stunning visual effect by using CSS to fade images in and out

Answer №1

Answer №2

Similar questions

Arrange the footer content into multiple columns

Grid sidebar using tailwindcss

Automatically scroll to the end of the data retrieved through ajax

When hovering, the <a> element does not fully encompass the background color

Enhance your website with a stylish CSS jQuery menu that lets you toggle, slide

Mysterious issue with loading images in HTML and PHP

What is the best way to include an active CSS class in a menu item?

Achieving Desired Styling Without Altering the HTML Structure: A Guide to CSS Formatting

Please assist in changing the text color of the right side of my navigation bar to white with the help of Bootstrap

Attempting to link two JavaScript files, however, only one of them is functioning correctly

Creating a background color without using the <canvas id> element can be achieved by utilizing CSS properties such as

Hover over the image with some padding placed around it to see

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Is there a way to position the button at the bottom right corner of my div box?

The content is overflowing outside the boundaries of the div, yet there is no

What's the best way to arrange my containers for optimal placement?

Using the ternary operator in React to implement inline styles

Ways to create intersecting borders at the corners of a division

What is the most efficient method for updating URLs in CSS files before the website goes live?

Building modals with Bootstrap