I have 5 div's and I want them to fill the parent div on mouse hover

Issue

I have these 5 div's and I want them to fill the parent div on mouse hover I have these codes but they do not push the previous div (the div above) anywhere.

this is the HTML code:

<div id="photo">
<div id="no1">
        &nbsp;
    </div>
    <div id="no2">
        &nbsp;
    </div>
    <div id="no3">
        &nbsp;
    </div>
    <div id="no4">
        &nbsp;
    </div>
    <div id="no5">
        &nbsp;
    </div>

and this is the CSS:

div#photo{
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100,100,100,0.5);
border-radius:20px;
overflow:hidden;}

div#no1{
background-color:#FF00FF;}
div#no2{
background-color:#FF0;}
div#no3{
background-color:#00F;}
div#no4{
background-color:#0F0;}
div#no5{
background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5{
width:970px;
height:61px;
transition:all 2s;}
div#no1:hover, div#no2:hover, div#no3:hover, div#no4:hover, div#no5:hover{
height:305px;}

Solution

you can use jquery .mouseenter & .mouseleave events to do your job. here i made an example

Answered By - Eugen Halca