CodePen

HTML

            
              <div role="slider" class="wrapper">
		<div class="slide first">
			<img src="http://carls.allnorthbay.com/wp-content/themes/pdmedialab-child/images/slider-1.jpg">
			<h2>Request an Estimate</h2>
		</div><div class="slide">
			<img src="http://carls.allnorthbay.com/wp-content/themes/pdmedialab-child/images/slider-2.jpg">
			<h2>Davis Colors</h2>
		</div><div class="slide">
			<img src="http://carls.allnorthbay.com/wp-content/themes/pdmedialab-child/images/slider-3.jpg">
			<h2>What is Ready Mix?</h2>
		</div>
</div>
            
          
!

CSS

            
              $red: #c51b1d
$blue: #1f3e6d
$grey: #848587

.wrapper
	width: 960px
	margin: 20px auto

[role="slider"]
	border-bottom: 1px solid white
	.slide
		height: 314px
		+inline-block
		width: 20%
		position: relative
		overflow: hidden
		+transition(all 0.6s ease)
		&:hover
			+transform(scale(1.1))
			+box-shadow(0 0 10px 3px #333)
			+box-shadow(0 0 10px 3px rgba(0,0,0,.4))
			position: relative
			z-index: 99
		h2
			opacity: 0
			background-color: shade($grey, 50%)
			background-color: rgba(0,0,0,.4)
			position: absolute
			bottom: .5em
			left: 0
			line-height: 2em
			color: white
			padding-left: 2.3em
			width: 100%
			font-style: italic
			margin: 0
			+transition(all 0.6s ease)
		&.first
			width: 60%
			h2
				opacity: 1
		&.closed
			width: 20%
			h2
				opacity: 0
		&.active
			width: 60%
			h2
				opacity: 1
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              jQuery(document).ready(function ($) {
	$(".slide").hover(
  		function () {
  			$(".slide").addClass("closed");
    		$(this).addClass("active");
  		},
  		function () {
    		$(this).removeClass("active");
    		$(".slide").removeClass("closed");
  		}
	);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................