See it Live: https://john-azzaro.github.io/Study-Crossfade-Transitions/
Crossfade Transtions are used to blend two (or more) images or text areas together at a defined transparency. The "Crossfade Transition Study" demonstrates how this is accomplished with a simple image gallery and pure CSS. The first image, which features the golden gate bridge, crossfades between a dusk image and day time image with gradual transition effects. The second image, which featires a city skyline, crossfades between the skyline and a dark transparent background with descriptive text.
Here are a few questions from the study to explore:
- What are the key takeaways from the Crossfade transition study?
- Does Crossfade Transition Study feature commentary?
- What are the key features of Crossfade Transition Study?
- Screenshots
-
Other than getting the gallery correctly built, getting a crossfade transition with pure CSS simply requires an primary image and a cross-fade image on top (although I wouldnt necessarily say the top since you arent messing with the z-index positioning). Just setting the opacity level to 0 and hovering to 1 for image on image or transitioning to shaded background with text is extremely easy to setup.
Yes! I use extensive commentary (mostly in the form of my thought process) so that the new and curious can follow the logic in the program and get an idea of my reasoning behind each and every line of code. In addition to my line-by-line commantary, I also provide a Process text file that gives a good outline of my implementation process.
Since this study is ongoing, basic functionalities are covered first and more advanced features are added or will be added in the future:
| Features: | Feature Notes: |
|---|---|
| CF transition image to image | On hover, one image will crossfade into another image |
| CF transition image to text area | On hover, one image will crossfade into a transparent text area |
