带有CSS的边栏

我正在尝试制作一个CSS侧边栏。默认情况下，它应该是隐藏的，只有这张图片显示出来，请参见下面的右侧。一旦用户将鼠标悬停在这张图片上，它就会出现并显示一个包含一些文本的小框

侧边栏不应位于右上角，而应位于屏幕高度的一半。我已经可以在左边做了，没有动画，请看代码。这对我来说是不可能的：我讨厌CSS！！！我希望有人能帮我做到这一点。事先非常感谢您的耐心，请原谅我的问题，但我对CSS很在行

编辑：这是我迄今为止的尝试

#side{
position:absolute;
  top:0;
  left:0;
  height:40px;
allign: center;
background-color: blue; 

---

像这样的？我现在没有时间调整，但如果这是你想要的，你应该知道

根本不起作用。它只是卡在左上角，在悬停时，图像开始来回抖动。在这里看到结果：好吧，这里的交易-你需要的不仅仅是一个div在一个页面上，该div需要一个容器来定位它，然后你还需要通过纯css理解动画将不会很漂亮。这使用jQuery你可以做到这一点，它会工作得更好。是的，在开发页面之前，也许会学习一些关于html/css/javascript的知识，或者做一些完全不同的事情，如果你讨厌css：-事实上，我用html5画布渲染了它，现在效果很好；这令人困惑。。。你有一个困难的时间与基本的css，但在画布上做它。。。那你为什么不一直用JS呢？好吧，你不能单用CSS就这么做。为了使顶部距窗口顶部50%，需要使用javascript获取窗口的高度。另外，图像看起来应该在左边，而不是右边。我不完全理解你需要什么。。。当您将鼠标悬停在图像上时，是否希望图像保持在侧面并显示该div？使用您的实际解决方案，您正在移动包含图像的div，我想这根本不是您想要的：-

#side{
position:absolute;
  top:0;
  left:0;
  height:40px;
allign: center;
background-color: blue; 
}
#side:hover{
  position:absolute;
  top:0;
  left:200px;
  height:40px;
  allign: center;
  background-color: blue; 
}