无法在CSS幻灯片中查看图片

我有一个CSS幻灯片的代码，在悬停时左右移动。但是，当我编辑代码将图像放入幻灯片中时，什么都没有显示出来。 This是幻灯片，您可以在页面的左下角看到它的工作版本here;然而，我不能让我的做同样的事情，并加载图像。无法在CSS幻灯片中查看图片

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; 
}

来源

2017-06-01 Hollie Ordway

您是否尝试在CSS中添加适当的宽度和边距？ – karthick

的代码工作正常。您需要在容器和容器中包含适当的“宽度”和“边距”属性：hover 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/

注：整个转盘取决于很多硬编码值的，你必须给予适当的图像尺寸，以适应在它的内容。请看看一些旋转木马般的光滑旋转木马或猫头鹰旋转木马等，

来源

2017-06-01 01:23:28 karthick

无法在CSS幻灯片中查看图片

回答

相关问题