在wordpress中将图像堆叠在一起

Question

我正在一个网站上工作，我被要求添加一个特定的动画，这一切都很好用简单的HTML，但当我上传到Wordpress（其上安装了Salient主题，顺便说一句）我希望动画的图像与另一个没有重叠。这是我的代码：

.cdcase{
position:relative;
top:0;
left:0;
}


#case{
	position: relative; 
	top: 0; 
	left: 0; 
	z-index:1;
}

#rotate {
	position: absolute;
	top: 30; 
	left: 30;
    width: 400px;
    height: 400px;
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s;
  -o-transition: width 2s, height 2s, -o-transform 2s;
}
    

#rotate:hover {
    width: 450px;
    height: 450px;
    -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  	z-index: 2;
}

<div class="cdcase">
			<img id="case" src="http://firmebucuresti.net/site/wp-content/uploads/2015/09/case.png" >
			<a href="#"><img id ="rotate" src="http://firmebucuresti.net/site/wp-content/uploads/2015/09/cd.png" alt="cd"></a>
</div>

CD应该是蓝色的“案例”，但事实上，现在我通过代码片段上传了动画，我注意到它在这里不起作用，但在我的localhost上它确实如此。有人可以指出我做错了吗？

Answer 1

你做得很好！但是您需要将#rotate:hover的z-index移动到#rotate，如下所示：

＆＃13;

＆＃13;

.cdcase{
position:relative;
top:0;
left:0;
}


#case{
	position: relative; 
	top: 0; 
	left: 0; 
	z-index:1;
}

#rotate {
	position: absolute;
	top: 30; 
	left: 30;
    width: 400px;
    height: 400px;
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s;
  -o-transition: width 2s, height 2s, -o-transform 2s;
    z-index: 2;
    left: 220px;
}
    

#rotate:hover {
    width: 450px;
    height: 450px;
    -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

＆＃13;

<div class="cdcase">
			<img id="case" src="http://firmebucuresti.net/site/wp-content/uploads/2015/09/case.png" >
			<a href="#"><img id ="rotate" src="http://firmebucuresti.net/site/wp-content/uploads/2015/09/cd.png" alt="cd"></a>
</div>

＆＃13;

＆＃13;

＆＃13;

此外，您需要设置一些左/右/上/下值以从页面的左上角创建边距。