Animation How to - Hover to enlarge Css3 transitions menu

Question

We would like to know how to hover to enlarge Css3 transitions menu.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.myTest{<!--  ww w  .  ja va  2  s.  co m-->
    float:left;
    width: 100px;
    height: 50px;
    background: #eee;
    line-height:50px;
    padding-left:10px;
}
.box {
    width:15px;
    height: 50px;
    padding-left:10px;
    background: #000;
    -webkit-transition: width 1s ease, height 1s ease;
    -moz-transition: width 1s ease, height 1s ease;
    -o-transition: width 1s ease, height 1s ease;
    -ms-transition: width 1s ease, height 1s ease;
    transition: width 1s ease, height 1s ease;
    overflow:hidden;
    color:#fff;
    line-height:50px;
}
.box:hover {
    width: 220px;
    height: 50px;
}
.box p{width:200px;}
.box p span{width:20px; display:block; float:left;}
</style>
</head>
<body>
  <div class="myTest"><p>Lorem ipsum</p></div>
  <div class="box">
    <p>
        <span>+</span>
        Lorem ipsum <a href="#">dolor sit amet</a>
    </p>
</div>
</body>
</html>

The code above is rendered as follows: