grow element size using javascript

user_14061549 0
Viewed 288

I'm working on a project where I hover over an image and a hidden element with info about my image appears . I perform this functionality using javascript . However I would like the image size to gracefully grow from very small to the normal size when I hover over my image .

I have a small code demo with a text instead of an image below :

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>

I would appreciate your help with guiding me through this small task . Thank you in advance .

css-transitions css html javascript
3 Answers

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>

user_133686580

You can achieve this one by css.

#hidden_text {
  transform: scale(0);
  transform-origin: 50 50;
  transition: transform 2s 0s;
  width:100px;
  height:100px;
  background-color:green;
}

#hover:hover ~ #hidden_text {
  transform: scale(1);
}
<p id="hover">Hover over me !</p>
<div id="hidden_text">  
  I am the hidden text !
</div>

user_46461170

no need foor JS for such simple task. You can simply do it with the :hover tag with CSS and add a transition tag to get your wanted animation of growing slowly.

.image {
  width: 200px;
  height: 100px;
  background-color: blue;
}

.image:hover {
  width: 500px;
  height: 250px;
  background-color: blue;
  transition: width 2s, height 2s;
}
<div class="image">I'm an Image</div>

user_140724200
Related