html5 - 用CSS实现鼠标移动到图片上的变化

Question

1. 如何用CSS实现鼠标移动到图片上，发生图片旋转或变色等响应变化
   以及跟着页面移动的悬浮框怎么制作

希望能有完整代码例子，带注释就更好不过了（小白在这里谢谢了）

1. https://handuyishe.tmall.com/shop/view_shop.htm?spm=a230r.7195193.1997079397.1.81V5Fs参考网站

2. 贴上报错信息

3. 贴上相关截图

4. 已经尝试过哪些方法仍然没解决（附上相关链接）

Answer 1

lz It’s you again! ! ,
1: The floating box uses layout position:fixed
2: The image rotation is css3 attribute transform:rotate |rotateX Y Z|rotate3d
Implementation ideas of color change: 1: Image color change css3 filter attribute, There are only a few variations, but the compatibility is not that good

              2:布局的背景色 变化
              3:图片切换 

I’ve told you the idea, just search, try and learn ~~~

Answer 2

<ul>

<li>
    <p>改变颜色</p>
</li>

</ul>

li:hover p { color:red; }
is the same for other changes,

Answer 3

Pure CSS implementation? Similar effects are mostly achieved using jquery. Check it out at Lazy Gallery or Script Home.

Answer 4

Use transform:rotate(xxdeg) for rotation, preferably with transition Smooth transition
For simple color change, use opacity or filter, such as -webkit-filter:grayscale(1)

The floating box that moves with the mouse seems to use js