A Pen by Stan Williams.

Background-Image-Slideshow-Menu.markdown

Background Image Slideshow Menu

This is a slideshow using background images in divs. The advantage is you can use inset box shadows and can place text in the divs as captions.I added links.

A Pen by Stan Williams on CodePen.

License.

index.html

<!-- original code by Dolores Portalatin http://codepen.io/meskarune/ 
I  added  clickable links so I can use it as a slider menu on a website--->
<div class="slideshow">
  <div class="slide" style="background: url('http://lorempixel.com/300/300/cats/');"><h2>This is a cat</h2></div>
    <div class="slide" style="background: url('http://lorempixel.com/300/300/animals/');"><h2>This is an animal</h2></div>
    <div class="slide" style="background: url('http://lorempixel.com/300/300/nature/');"><a href="http://www.stans-songs.com/" target="_blank"><h2> Clickable Link</h2></a></div></a>
</div>

script.js

$(function() {
    $(".slideshow > div:gt(0)").hide();
    setInterval(function() { 
	    $('.slideshow > div:first')
		    .fadeOut(2500)
			.next()
			.fadeIn(2500)
			.end()
			.appendTo('.slideshow');
        },  5000);
});

style.css

.slideshow {
    position: relative;
    margin:0;
    padding:0;
}
.slide {
    position:absolute;
    margin:0;
    padding:0;
    height:300px;
    width:300px;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    border-radius: .5em;
    box-shadow: inset 0px 0px 8px 1px rgba(0, 0, 0, 0.5);
    border-bottom: solid 1px white;
    border-right: solid 1px white;
    border-top: solid 1px #E2E2E2;
    border-left: solid 1px #E2E2E2;
}
h2 {
  font-family:sans-serif;
  text-align:center;
  color:#fff;
  background-color: rgba(0,0,0,.6);
}

Background Image Slideshow Menu.
This is a slideshow using background images in divs. The advantage is you can use inset box shadows and can place text in the divs as captions.I added links.

Preview and Demo in editor here: http://codepen.io/Stanssongs/pen/cuhaI