We can do a transition from background-size: 0 to background-size: 100%. Although the background will stay a single solid color at first, as you scroll throughout the page a different color will take its place temporarily. With background-size, we can omit the height because gradients are full height by default. A simple CSS Animation with very little source code that creates a gradient background as you scroll. Both color stops are 0, so the browser automatically makes the last one 100% and fills our gradient with the same color. The syntax might look a bit strange, but we are telling the browser that one color is applied to two color stops, and that’s enough to define a gradient in CSS. It is fast loading, easy to implement and works on all browsers. When the user hovers over the container, the 'rollover' image becomes opaque. Then, inside the parentheses of the url () function, add a path to the file, as the highlighted CSS in the following code block demonstrates: styles.css. The best way to swap images on hover is to place both images in the same container, with the 'rollover' image transparent by default. To load the photo.jpg file as the background, first create a url () function as the value. We first transform our gradient to use the color only once: background-image: linear-gradient(#1095c1 0 0) style-02 class selector, then add a background-image property. That means the width is going from 0 to 100% while the background itself remains at full height. We are animating the size of a linear gradient from 0 100% to 100% 100%.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |