html - 悬停时的背景图像

Question

我如何在鼠标悬停时创建一个居中并位于文本段落后面但在渐变动画之上的背景图像？

https://codepen.io/glittergirl/pen/mjopmW

img{
display: none;
max-width: 50%;
opacity: 0.5;
filter: alpha(opacity=50);
justify-content: center;
}

span:hover + img{
display: block;
}

.photo img{
max-width: 30%;
opacity: 0.5;
filter: alpha(opacity=50); 
}

哦，最后如果有人知道为什么我的旋转文本不受我的样式的影响？？快把我逼疯了

Answer 1

在您的代码中添加此 css，它将起作用

p { position:relative; z-index:1;}

img{ position: fixed; z-index: 0; opacity: 1; left: 50%; transform: translate(-50%, -50%); top: 50%; }