CSSスライドショーで画像を表示できない

Question

私は、ホバーの左右に動くCSSスライドショーのコードを持っています。しかし、スライドショーに画像を配置するコードを編集すると、何も表示されません。 Thisはスライドショーで、ページの左下隅に現れたバージョンが表示されますhere;しかし、私は同じことをしてイメージをロードすることはできません。

HTML：

<div class="all"><div class="trash"></div><div class="buttons"><div class="back"><div class="goleft"></div><div class="container"><div class="textne"><b>[DESCRIPTION]</b></div> 

<a href="[IMAGE LINK]"><div class="imagene"><img src="[IMAGE URL]"></div></a> 

</div></div></div></div><a href="[LINK URL]"><div class="linku"><p>[LINK NAME]</p></div></a> 

CSS：

*{background:none; border:none; margin:0;} 
a.external:after {display:none!important;} 
span.user-symbol {display:none!important;} 
a {font-weight:normal!important;} 
.gr-top{display:none;} 
.gr-top h2 img{display:none;} 
.gr-top h2{display:none;} 
.gr-top span{display:none;} 
.tri{display:none;} 
.gr1{display:none;} 
.gr2{display:none;} 
.gr3{display:none;} 
.commentslink, .prevlink{display:none;} 
.hsep{display:none;} 
.bottom {display:none;} 
.list {display:none;} 


.gr-box{ 
cursor:default; 
z-index:99!important; 
line-height:1.2em; 
font-family:Lucida Console; 
font-size:10px; 
} 

.gr-body, .text{ 
position:relative; 
width:550px; 
overflow:hidden; 
margin:0px auto; 
text-align:center; 
} 

.back{ 
width:500px; 
height:300px; 
background:transparent; 
overflow:hidden; 
margin-left:0px; 
border-left:1px solid #000; 
border-right:1px solid #000; 
border-bottom:1px solid #000; 

} 

.container{ 
width:[CONTAINER WIDTH]px; 
height:300px; 
margin-left:0px; 
text-align:left; 
transition:all 5s linear 360s;} 

.container:hover{ 
margin-left:-[MARGIN]px; 
transition:all 5s linear; 
} 

.goleft { 
position:absolute; 
background:#000; 
opacity:0; 
width:200px; 
height:300px; 
z-index:9999; 
cursor:url(http://orig09.deviantart.net/aa48/f/2015/327/f/2/arrow_by_codingtrash-d9hpzk9.png), auto; } 

.goleft:hover + .container{ 
margin-left:0px; 
transition:all 4s linear; } 

.container u{ 
position:relative; 
display:inline-block; 
text-decoration:none; 
width:100px; 
height:150px; 
overflow:hidden; 
padding:50px 30px; 
text-align:center; } 

.imagene{ 
position:relative; 
display:inline-block; 
background:#777; 
margin-top:8px; 
margin-left:8px; 
height:280px; 
border:1px solid #333; 
transition:all .4s; 
} 

.imagene img{ 
opacity:0.8; 
height:280px; 
transition:all .4s; 
} 

.imagene img:hover{ 
opacity:1; 
} 

.imagene:hover { 
border:1px solid #fff; } 

.textne{ 
position:relative; 
display:inline-block; 
background:#777; 
margin-top:8px; 
width:200px; 
margin-left:8px; 
height:280px; 
border:1px solid #333; 
transition:all .4s; 
} 

.textne b{ 
text-align:center; 
color:white; 
opacity:0.8; 
font-weight: normal; 
position:absolute; 
padding:110px 50px; 
transition:all .4s; 
} 

.trash { 
position:absolute; 
width:500px; 
height:150px; 
background:#999; 
margin-top:75px; 
z-index:-9; 
border:1px solid #000; 
} 

.all { 
margin-left:-10px;} 

.linku{ 
display:inline-block; 
height:30px; 
border:1px solid #000; 
color:#222; 
margin-top:-1px; 
margin-left:-30px; 
text-align:left; 
width:200px; 
background:#999; 
overflow:hidden; 
transition:all .3s; 
} 

.linku:hover { 
background:#888; 
color:#000; 
border:1px solid #fff; 
border-top:1px solid #000; 
} 

.linku p{ 
text-align:center; 
width:200px; 
padding-top:10px; 
transition:all .3s; 
} 

Answer 1

コードが正常に動作します。ホバリングCSSルール

私はフィドルリンクを添付しています。

.container{ 
    width: 1700px; 
    height:300px; 
    margin-left:0px; 
    text-align:left; 
    transition:all 5s linear 360s; 
} 
.container:hover{ 
    margin-left:-1015px; 
    transition:all 5s linear; 
} 

https://jsfiddle.net/karthick6891/z9atpexz/

注：全体カルーセルハードコードされた値の多くに依存しますが、その中にコンテンツに合わせて適切な画像サイズを与える必要があります。親切にいくつかのカルーセルの滑らかなカルーセルやフクロウカルーセルなどのように見て、