The jQuery Coin Slider plugin is a great image slider to have in your web developer toolbox. I have implemented this plugin on a few websites and have been more than satisfied with its ease of implementation. One feature the plugin is lacking is the ability to incorporate an overlay image. I resolved this conundrum with a simple CSS solution.
Here is the baseline html for the image slider plugin:
To lay the image over the slider, I will need to place the overlay image’s <img> tag and the slider’s <div> construct inside a <div> tag. Next, I will apply the “position:absolute” style to the overlay image’s <img> tag and the slider’s <div> construct. Finally, I will apply a “z-index:9999” value to the overlay image’s <img> tag. The”position:absolute” style property will ensure both items occupy the same space. The “z-index:9999” style property will display the overlay image in front of the slider.