![]() The technique is basicly the same as what did, but perhaps a bit more intuitive because I don't use the background-color: inherit. Thanks to the transition it fades in nicely. ![]() On hover of the div, I change the background color of the pseudo element to be less transparent. What I did is i defined the :after pseudo element on the default state of the div in stead of only on the hover state, but with a fully transparent background, and a transition on the background color. The keen-eyed observer would notice that something isn't quite right in the example. In this example, I chose a fun gradient, but you could use a simple background color or even another image to overlay. ![]() Transitions directly on pseudo-elements are now supported in Opera since the switch to Blink and in Safari since 6.1.Īllthough technique is also nice, and works fine, allow me to slightly alter my answer to the previous question, and add the transition in that code.īackground: url() no-repeat center center We make the overlay slightly transparent utilizing the opacity property. More info and examples about how you can transition various properties of pseudo-elements using this inherit technique: IE10 supports them in a bit of a weird way, meaning that something like. ✗ Current versions of Safari and Opera don't support transitions on pseudo-elements.Ĭhrome supports transitions on pseudo-elements only starting from version 26. ✓ Firefox supports transitions on pseudo-elements and has supported them for quite a while, let's get this out of the way first. Support for transitions on pseudo-elements The reason why I am not transitioning directly the background-color of the pseudo-element is that support for transitions on pseudo-elements is still not that good yet. ![]() However, I am also using background-color: inherit on the pseudo-element, which means that, at any given moment, the pseudo-element, which is situated above its parent div (and therefore above the background-image of the div) is going to have the same background-color (meaning that the background-color of the pseudo-element is going to transition from rgba(0,0,0,0) to rgba(0,0,0.5) on :hover). All this happens behind the background-image. Note: Background video filenames should not include spaces or special characters (except dashes) and videos should be optimized for the web for best performance.What I am doing here is that I am setting a RGBa background-color on the div, behind its background-image and transitioning this background-color (its alpha) on :hover. The Background video component accepts video files smaller than 30MB with the following formats: webm, mp4, mov, ogg. For more information, check out our lesson on toggling play/pause on background videos. You can also style and customize the play/pause button to your liking. Giving visitors clear video control will lower the site bounce rate. Good to know: Autoplaying video with no clear way to pause it is among the top 10 reasons site visitors will leave without accomplishing their task on your site. Important: If you’ve disabled the Include play/pause button setting, site visitors with Prefers reduced motion enabled in their operating system will not be able to play your background video. Your background video will automatically pause if a site visitor has the Prefers reduced motion setting enabled in their operating system, regardless of whether Include play/pause button is enabled or disabled. When enabled, the Include play/pause button setting provides a built-in play/pause button on your background video that your site visitors can use to start and stop the video. If you’ve enabled the Autoplay video setting, make sure the Include play/pause button setting is enabled as well to provide an accessible experience for your site visitors. Important: WCAG Success Criterion 2.2.2: Pause, Stop, Hide states that if any moving, blinking, or scrolling information starts moving automatically and moves for more than five seconds, controls must be provided for a user to pause, stop, or hide the movement. When enabled, the Autoplay video setting makes your background video begin to play as soon as the page is loaded. If you’ve enabled the Loop video setting, make sure the Include play/pause button setting is enabled as well to provide an accessible experience for your site visitors. When enabled, the Loop video setting makes your background video loop (i.e., repeat) continuously.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |