lmage slidder

<link href="http://fonts.googleapis.com/css?family=Amarante" rel="stylesheet" type="text/css"/>
<style>
/*Main Slider Box */
.acc_slider {
  width: 773px;
  height: 293px;
  background-color: #ccc;
  margin: 20px auto;
  overflow: hidden;
  border: 5px groove #000;
}
.acc_slider:before {
content: " ";
display: block;
position: absolute;
width: 573px;
height: 293px;
background-color: #blue;
z-index: -1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.acc_slider ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 3000px;
  height: inherit;
}
.acc_slider li {
  position: relative;
  list-style: none;
  float: left;
  padding: 0;
  margin: 0;
  width: 94px;
  overflow: hidden;
  border-right: 1px solid #000;
}
.acc_slider li img {
  width: 469px;
  margin-left: -70px;
}
.acc_slider li,
.acc_slider li img {
  height: inherit;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.acc_slider li:last-child {
  padding-right: 500px;
}
/*Texts*/
.acc_slider li .slide_textarea ,
.acc_slider li .slide_title {
color: #fff;
position: absolute;
white-space: nowrap;
}
.acc_slider li .slide_title {
top: 94px;
left: 190px;
font-size: 32px;
}
.acc_slider li .slide_textarea {
top: 150px;
left: 240px;
font-size: 24px;
}
/*Special Text !*/
.acc_slider li .slide_title {
top: 58px;
}
.acc_slider li .slide_title:first-letter {
font-size: 63px;
}
.acc_slider li:nth-child(1) .slide_title:first-letter {
color: #b4180d;
}
.acc_slider li:nth-child(2) .slide_title {
top: 49px;
left:208px;
}
.acc_slider li:nth-child(2) .slide_title:first-letter {
color: #779c1a;
}
.acc_slider li:nth-child(3) .slide_title:first-letter {
color: #cdcbc9;
}
.acc_slider li:nth-child(4) .slide_title:first-letter {
color: #7328ab;
}
.acc_slider li:nth-child(5) .slide_title {
top: 69px;
left:262px;
}
.acc_slider li:nth-child(5) .slide_title:first-letter {
color: #d76b35;
}
.acc_slider li:nth-child(5) .slide_textarea {
top: 190px;
left: 280px;
}
.acc_slider li:nth-child(6) .slide_title {
top: 69px;
left:212px;
}
.acc_slider li:nth-child(6) .slide_title:first-letter {
color: #538bc7;
}
.acc_slider li:nth-child(6) .slide_textarea {
top: 200px;
left: 240px;
}
.acc_slider li:nth-child(7) .slide_title:first-letter {
color: #b97259;
}
.acc_slider li:nth-child(8) .slide_title:first-letter {
color: #f2c366;
}
/*main hover*/
.acc_slider ul:hover li {
  width: 40px;
}
.acc_slider ul li:hover {
  width: 469px;
}
.acc_slider ul li:hover > img {
  margin-left: 0;
}
/*Powered slide*/
.mghayour {
height: 42px;
font-size: 42px;
text-align: center;
color: #444;
}
.mghayour:before {
content: "Powered By ";
display: inline;
}
.mghayour:after {
content: "MGhayour";
color: #7328ab;
display: inline;
}
</style>
<section class="acc_slider">
<ul>
<li>
<img src=" https://z-p3-scontent-sin6-2.xx.fbcdn.net/v/t1.0-0/cp0/e15/q65/p600x600/30726174_1004875582996483_1698630802172018688_o.jpg?_nc_cat=0&efg=eyJpIjoiYiJ9&oh=fe693679706c867b33d635b0359e7340&oe=5B61A90A " alt="AvnSlider_Slide" width="469" height="293">
  <div class="slide_title">Judul Halaman</div>
  <div class="slide_textarea">
                 <a href="URL Tujuan">
                            Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
  <div class="slide_title">Judul Halaman</div>
  <div class="slide_textarea">
                 <a href="URL Tujuan">   Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
  <div class="slide_title">Judul Halaman</div>
  <div class="slide_textarea">
                <a href="URL Tujuan">
                         Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
  <div class="slide_title">Judul halaman</div>
  <div class="slide_textarea">
                <a href="URL Tujuan">
                            Deskripsi singkat </a></div>
      </li>
        <li>
        <img src="URL gambar" alt="AvnSlider_Slide" width="469" height="293">
  <div class="slide_title">Judul Halaman</div>
  <div class="slide_textarea">
                <a href="URL Tujuan"> Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL gambar" alt="AvnSlider_Slide" width="469" height="293">
  <div class="slide_title">Judul Halaman</div>
  <div class="slide_textarea">
                <a href="URL Tujuan"> Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
  <div class="slide_title">Judul Halaman</div>
  <div class="slide_textarea">
                <a href="URL Tujuan">  Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
  <div class="slide_title">Judul Halaman</div>
  <div class="slide_textarea">
                <a href="URL Tujuan"> Deskripsi singkat </a></div>
      </li>
    </ul>
  </section>