How can I fade in new HTML elements with CSS [duplicate]


Tags: html,css,css-transitions

Problem :

This question already has an answer here:

How is it possible to make all new HTML elements fade in using only CSS without any bit of JavaScript?



Solution :

You can use CSS transitions

Here is some sample code:

<style>
.swapMe img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .swap1, .swapMe:hover .swap2 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe:hover .swap1, .swap2 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }
</style>

<div class="swapMe">
  <img src="http://0.tqn.com/d/webdesign/1/0/D/m/1/jaryth1.jpg" class="swap1" style="position: absolute;">
  <img src="http://0.tqn.com/d/webdesign/1/0/E/m/1/jaryth2.jpg" class="swap2">
</div>

    CSS Howto..

    How to center an element based on the parent div?

    How can I give an image a black opaque overlay?

    how to put 2 css elements in the same row (one next to each other)?

    How to center align vertically the container in bootstrap

    How to position children with respect to parent in CSS?

    How can I make responsive image take up 100% of its parent's height?

    How to hide the div after sometime in angular or css?

    How to change underline thickness of an a-tag without using border?

    How to align things responsive html CSS

    jQuery + CSS text show not working

    How to add a new CSS class to a Link Badge if the value is 0?

    How to create different and unique ID for some class in css?

    Auto-scaled image not shown correctly with IE 10

    How to add TITLE and ALT to an background image (CSS Sprites)?

    how to prevent transformation of text inherited from a skewed parent

    jQuery slideDown() moves everything below downwards. How to prevent this?

    Telling LESS CSS how to behave with .active li

    How can I build a flexible ratings widget in LESS instead of straight CSS?

    How to convert from Powerpoint to HTML / CSS ? (FOSS)

    How to call particular CSS file only for desktop not for mobile [closed]

    Simple Form button submit doesn't show in IE 8-7

    How to Auto-Resize a DIV with CSS while keeping Aspect Ratio?

    repeated divs loaded by angular could have different contents, how can I make them have automatically adjusted heights?

    How to bottom center a span inside a list item

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How to transform an image in SVG (or CSS) into a non-parallelogram shape?

    how to change element css class runtime using javascript

    CSS element class - Height differs based on content, how to fix?

    CSS isn't shown when HTML file is opened in Word

    How do you create a link out of circular text with JavaScript and CSS?