图片悬停时显示菜单

当用户悬停在图片上时，显示菜单叠加层。

• 使用 <figure> 包裹 <img> 元素和一个包含菜单链接的 <div> 元素。
• 使用 opacity 和 right 属性在悬停时对图片进行动画处理，创建滑动效果。
• 将 <div> 的 left 属性设置为元素宽度的负值。当悬停在父元素上时，将其重置为 0，以便将菜单滑入。
• 在 <div> 上使用 display: flex、flex-direction: column 和 justify-content: center，使菜单项垂直居中。

<figure class="hover-menu">
    <img src="https://picsum.photos/id/1060/800/480.jpg"/>
    <div>
        <a href="#">首页</a>
        <a href="#">定价</a>
        <a href="#">关于</a>
    </div>
</figure>

```css .hover-menu { position: relative; overflow: hidden; margin: 8px; min-width: 340px; max-width: 480px; max-height: 290px; width: 100%; background: #000; text-align: center; box-sizing: border-box; }

.hover-menu * { box-sizing: border-box; }

.hover-menu img { position: relative; max-width: 100%; top: 0; right: 0; opacity: 1; transition: 0.3s ease-in-out; }

.hover-menu div { position: absolute; top: 0; left: -120px; width: 120px; height: 100%; padding: 8px 4px; background: #000; transition: 0.3s ease-in-out; display: flex; flex-direction: column; justify-content: center; }

.hover-menu div a { display: block; line-height: 2; color: #fff; text-decoration: none; opacity: 0.8; padding: 5px 15px; position: relative; transition: 0.3s ease-in-out; }

.hover-menu div a:hover { text-decoration: underline; }

当鼠标悬停在.hover-menu上时，图片的透明度变为0.5，位置向右移动120像素。同时，div元素的位置向左移动，透明度变为1。