javascript - 使用 JavaScript 增加元素大小

Question

我正在开发一个元素，将鼠标悬停在图像上，会出现一个包含图像信息的隐藏元素。我使用 javascript 执行此功能。但是，当我将鼠标悬停在图像上时，我希望图像大小能够从非常小优雅地增长到正常大小。

我有一个小代码演示，下面是文本而不是图像:

function showinfo(){
   document.getElementById("hidden").style.visibility="visible";
}

function noinfo(){
   document.getElementById("hidden").style.visibility="hidden";
}

#hidden{
width:100px;
height:100px;
background-color:green;
visibility:hidden;
}

<p id="hover" onmouseover="showinfo()" onmouseout="noinfo()">
  Hover over me !</p>
<div id ="hidden">  
    I am the hidden text !
</div>

非常感谢您帮助指导我完成这项小任务。预先感谢您。

Answer 1

function showinfo() {
  document.getElementById("hidden").style.visibility = "visible";
}

function noinfo() {
  document.getElementById("hidden").style.visibility = "hidden";
}

#hidden {
  width: 0;
  height: 100px;
  background-color: green;
  visibility: hidden;
  padding: 10px;
  transition: width 2s;
  color:#fff;
  font-size:20px;
}

#hover:hover~#hidden {
  width: 100%
}

<p id="hover" onmouseover="showinfo()" onmouseout="noinfo()">
  Hover over me !
</p>
<div id ="hidden">  
  I am the hidden text !
</div>