Unable To View Pictures in CSS Slideshow - html

Question

I have a code for a CSS slideshow that goes left and right upon hover. However, when I edit the code to place the images into the slideshow, nothing shows up. This is the slideshow and you can see a working version of it in the bottom left hand corner of the page here; however, I cannot get mine to do the same thing and load the images.
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>
<div class="imagene"><img src="[IMAGE URL]"></div>
</div></div></div></div><div class="linku"><p>[LINK NAME]</p></div>
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

The code works fine. You need to include proper "width" and "margin" property in the container and container:hover css rule
I have attached a fiddle link.
.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/
Note: The whole carousel depends on lot of hardcoded values and you have to give proper image sizes to fit the content within it. Kindly look into some carousel's like slick carousel or owl carousel etc.,