html-css

<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب1</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب2</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب3</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب4</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>

@import url("http://bayanbox.ir/download/7372957094914503474/reset.css");
@import url("http://bayanbox.ir/download/5020935171374501258/animation.css");
/* LAYOUT */
/* SLIDER */
#slider {
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 320px;
    width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
}
#mask {
    overflow: hidden;
    height: 320px;
}
#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}
#slider li {
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}

#slider li.firstanimation {
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
    -moz-animation: cyclefive 25s linear infinite;
	-webkit-animation: cyclefive 25s linear infinite;
}

#slider .tooltip {
	display: inline-block;
	background: rgba(0, 0, 0, 0.7);
	position: relative;
	bottom: 75px;
	left: -10px;
	-moz-transition: all 1.7s ease-in-out;
	-webkit-transition: all 1.7s ease-in-out;
	-o-transition: all 1.7s ease-in-out;
	transition: all 1.7s ease-in-out;
}

#slider .tooltip h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 20px;
    /*-o-transition:1.7s ease-out;*/
    /*-webkit-transition:  1.7s ease-out;*/
    /*-moz-transition:1.7s ease-out;*/
    /*transition: 1.7s ease-out;*/

}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left: -370px;
}
#slider:hover li,
#slider:hover .progress-bar {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
/* PROGRESS BAR */
.progress-bar {
    position: relative;
    top: -5px;
    width: 680px;
    height: 5px;
    background: #000;
    -moz-animation: fullexpand 25s ease-out infinite;
    -webkit-animation: fullexpand 25s ease-out infinite;
}

div#mini-slider-box .entry-thumb img:hover,div#blog-info-box img:hover {
	ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
/*-------------- slide show---------------*/

.container {
	float: right;
}

#slider {
	margin: 0;
	width: 940px;
}

#content-slider {
	width: 680px;
	margin: 0 5px 0 0;
}

#slider, #mask {
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
}
#slider .tooltip {
	height: 55px;
	-moz-transition: all 2.8s ease-in-out;
	-webkit-transition: all 2.8s ease-in-out;
	-o-transition: all 2.8s ease-in-out;
	transition: all 2.8s ease-in-out;
}
#slider .tooltip h1 {
	font-size:21px;
	padding: 0 10px 0 20px;
}

#slider li#first:hover .tooltip, #slider li#second:hover .tooltip, #slider li#third:hover .tooltip, #slider li#fourth:hover .tooltip, #slider li#fifth:hover .tooltip {
	left: -620px;
}
@media (max-width: 867px) {
	
	.container {
		height: 284px;
	}
	
	#content-slider, #slider, #mask {
		height: 252px;
	}
	
	#mask ul li a img {
		max-width: 111%;
	}	
	
	.commentForm input#bComSub{
		padding: 3px 39px;
	}
	
	#slider .tooltip h1 {
		font-size: 17px;
	}
}

@media (max-width: 765px) {
	.main, .container {
		width: 100%;
		margin: 0;
	}
	
	.bg-black-nav{
		min-width: 100%;
	}

	#mask ul li a img {
		max-width: 100%;
	}
	
	.container {
		height: 247px;
	}
	#content-slider, #slider, #mask {
		height: 227px;
		max-width: 100%;
	}
	
	.foot{
		min-width: inherit;
	}
	
	article {
		width: 100%;
		float: none;
	}
	
	.aside {
		width: 90%;
		float: none;
		margin: 0 auto;
	}
	
	.commentForm input#bComSub{
		padding: 3px 60px;
	}
	
}
@media (max-width: 390px) {
	.container {
		height: 129px;
	}
	
	#content-slider, #slider, #mask {
		height: 113px;
	}
	
	#mask ul li a img {
		max-width: 50%;
	}
	
	#slider .tooltip h1 {
		font-size: 12px;
	}
	
}

div#mini-slider-box span{
	border-top: 4px solid #970eaf;
}