请发代码

上代码呀！都是一样的写，你的出不来 老师的能出来，不发代码怎么找问题呢？

通过 opaction 来控制

这是图片名称而已，比如你下载下来的图片是1.jpg，所以你这里应该吧{{index}}换成1

换行有空格

加油！

点小图出大图，大图划动，小图也会变

这个是css3动画呀，transition就是一个动画属性，你可以去w3school看看这个API（transition），所以它跟hover是没有关系的，hover是鼠标覆盖，而transition是页面加载时就可以动了

transform:all 0.8s     all指的就是.slider .main .main-i h2,.slider .main .main-i h3到.slider .main .main-i_active h2,.slider .main .main-i_active h2里的所有有变化的属性 ，可以看到margin-right产生了变化，而0.8就是运动的时间了。

将position: absolute改成relative后，网页效果和视频上的一致。

.slider .main .main-i{
   opacity: 0;
   position: absolute;
   right: 50%;
   top: 0;
}

又分析了一下，发现设置absolute时，img是相对于class=main-i main-i_active的div元素的，而main-i main-i_active内又是设置absolute的，按我的理解是，这个div位置不变，img就不变，那为什么视频内却是改变了呢？

你把行元素变成行内块元素试试。

display:inline-block;

width:

height:

有兼容性   在谷歌里好用，ie不支持，火狐都有兼容

有没有去掉空格

看具体课程，看老师老师在屏幕右下角有没有提供代码资源，建议自己手敲一遍~

使用z-index

.slider .ctrl .ctrl-i img{
	width:100%;
	position:absolute;
	bottom:50px;
	left:0px;
	opacity: 0;
	z-index: -1;
	-webkit-transition:all .2s;
}

.slider .ctrl .ctrl-i:hover img{	
	bottom:13px;

	-webkit-box-reflect:below 0px -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(transparent),
		color-stop(50%,transparent),
		to( rgba(255,255,255,0.3) )
	);
	opacity: 1;
	z-index: 0;
}

是不是逻辑内容写错了

.slider .ctrl .ctrl-i img:hover{}

它需要一个触发条件。

大神求份代码吧~我的代码调不对呀。。

楼上，正解。虽然看不见，但是在文档流中的位置没变，仍然可以点可以hover

求份代码可以么~？我的代码有问题，调不出来错

.slider .ctrl .ctrl-i img:hover{
	bottom:13px;

	-webkit-box-reflect:below 0px -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(transparent),
		color-stop(50%,transparent),
		to( rgba(255,255,255,0.3) )
	);
	opacity: 1;
}

我也想要

我猜是你a标签的换行符被解释为空格导致。

解决方案：1把a标签写在一行 2 font-size: 0; 3 line-height:0;

为的是浏览器的兼容性烤炉

产生间距的原因是因为回车键会被当做是一个空格来解析导致的