学生请教html。想将10张图片进行幻灯片播放，每张对应一个div，div水平居中隐藏布置在图片背后

老师布置的HTML思考题，写了一半实在有些不懂了，只能实现图片轮播和div对应，请教各位大佬儿怎么写！想将10张图片900x400进行幻灯片式的播放，每张对应一个div，div是隐藏的（我觉得我可能理解有问题应该就是透明的）且水平居中布置在图片背后并按长度的2/3也就是600平均布置。默认播放第一张图片，当鼠标移动到图片中时就播放div对应的图片，鼠标一出界面就返回第一张图片。请大神解惑！小弟感激不尽！

没看懂题意。。。，div是隐藏的还放在图片后面，长度还小于图片，那就是被叠放在图片背后，如果题意的意思是有一组默认显示的图片，当移动到默认的图片上时就显示图片后的div中的图片，移开就又重新显示图片盖住div，那就应该用到css3中的hover伪类选择器把，比如
图a背后是div①，那就是
a:hover{
display:none;
}
a:hover~①{//这里不知道a与①的选择关系，暂时用~
display:block
}
a{
display:block
}
①{
display:none
}