Html 如何在div的右侧制作悬停框？

我正在尝试修改 编码，这样箱子就会滑到箱子的左侧。 我在想我应该在课堂上改变一下至<代码>右侧：100%，但它什么也不做。应该是这样的 还有，当盒子滑向右侧，我将鼠标悬停在盒子上时，我该怎么办？我的盒子会一直停留，直到我将鼠标移开，我该如何修复它

下面是我在右侧制作动画时的css代码：

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

---

使用此代码在悬停时向左移动覆盖

.overlay {
  position: absolute;
  bottom: 0;
  left: 0; 
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
 width: 100%;
 left: -100%;
}

.container{
位置：相对位置；
宽度：50%；
浮动：对；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：0；
左：0；
背景色：#008CBA；
溢出：隐藏；
宽度：0；
身高：100%；
过渡：放松；
}
.container:悬停。覆盖{
宽度：100%；
左-100%；
}
.文本{
空白：nowrap；
颜色：白色；
字体大小：20px；
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

从右侧滑入覆盖
将鼠标悬停在图像上以查看效果

你好，世界

这就是你想要做的吗

HTML

<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
    <div class="overlay">
        <div class="text">Hello World</div>
    </div>
</div>

---

这不是我的意思，方框应该在图片的左侧，带有我给出的链接已经提供的动画。我在做同样的想法时添加了代码，但在我的post@MarkGolubev检查你是否在找这个是的，但唯一的问题是它应该从左边开始动画corner@MarkGolubev更新是的，它非常接近，唯一的事情是我希望动画从左角开始（从右角开始）更新。我刚刚删除了右边的：0；是的，是的！就这样！我还有第二个问题，当我将鼠标悬停到文本框时，它会消失吗？@MarkGolubev你的意思是将鼠标悬停在

.text

。我想你必须使用javascriptthat@XYZ是的，所以只有当你在图像上悬停时，框才会出现

.container {
  position: relative;
  width: 50%;
  float: right;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  right: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  right: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}