The sample file for “CSS3 Responsive Horizontal Sliding Menu on Hover” is called “basicHorzSliderMenu-wImagePhone.html.” Again, the css file is called, basicHorzSliderMenu-wImagePhone.css and is attached and located in the same folder.
In this video, “CSS3 Responsive Horizontal Slider Menu on Hover.” I’m going to pull some images in here just to bring the thing to life. I’m going to use PNG files. Why? I’m going to use PNG files because I’m going to make them circular with transparent backgrounds and I want to see through the backgrounds into the background of the web page itself. Jpegs do not support transparency but the PNG file format does (I use Png 24s).
If you want to know more about what file formats do what, you might want to take a look at our video, “Image File Formats.”
Also, as we move into this video, “CSS3 Responsive Horizontal Slider Menu on Hover” you are going to see that my sizing may not be to your liking as I go from phone to table to desktop. This width of the Hover Width and the actual images themselves can all be adjusted in the responsive media queries.
If you are new to Responsive Web design concepts, you may want to take our full tour by going to our mini series,“Responsive Web Design.”
Also, in this video,” CSS3 Responsive Horizontal Slider Menu on Hover” we want our videos to fade in and fade out as we hover from section to section. The fade in works pretty good, the fade out pretty much isn’t there. Of course the fade, as you will see, gets done using the CSS3 Opacity property. How cool is that?
As you view and manipulate the sample files, of course you will want to play with the amount of visibility of the final, On Fade In Image, as well as the speed of which it fades in.
Enjoy, “ CSS3 Responsive Horizontal Slider Menu on Hover.”