Web front-end small white case-mouse move to move out effect

Knowledge Points: HTML tags, CSS style (Enterprise style utilization), HTML plus CSS layout thinking, code optimization. Special effects principle (class name utilization).

HTML code:

    <div id= "Container" > <div class= "box1 text" >  <!--four features src=" Picture storage Location "width=" width "height=" height "alt=" description "-<p> heart Shape </p> </div> <div class= "Box2 con" > <div class= "pictxtop text" > <im            G src= "Images/2.jpg" width= "+" height= "165"/> <p> grassland </p> </div>                <div class= "Pictxtbotom text" >             <p> Lotus </p> </div> </div> <div class= "Box3 text" >  Owl </p> </div> & Lt;div class= "Box4 con" > <div class= "pictxtop text" >  <p> Prairie </p> </div> <div class= "Pictxtbotom text" >  <p> Lotus </p> </div> </di  V> </div>

CSS code:

   &LT;STYLE&GT;/*CSS Cascading Style sheet Makeup artist */*{margin:0;/* margin */padding:0;/* inner margin */}/* * Universal Selector all elements */#container {/* #+id Select            Name of the device */width:1315px;/*px pixel unit percentage%*/height:350px; /*border:1px solid red; border: Solid line */margin:150px auto;/*auto Default Center */} #container. box1{/*. + class Selector name            Word */width:250px;            height:350px;             Float:left;        margin-right:20px;            } #container. box2{width:250px;            height:350px;            Float:left;            margin-right:20px;/* right margin */} #container. box3{width:490px;            height:350px;            Float:left;        margin-right:20px;            } #container. box4{width:250px;            height:350px;        Float:left;        } #container. text{position:relative;/* relative positioning */overflow:hidden;}            #container. Text p{height:30px;            width:100%; BackgrounD:rgba (0,0,0,0.5);/*0*/line-height:30px;/* Line Height */text-indent:40px;/* character indent */color: #fff;/* Font        Color */position:absolute;/* Absolute Positioning * * left:0;/* distance to the left how much */bottom:-30px;/* bottom Alignment how much */}            #container. Con. pictxtop{width:250px;        height:165px;            } #container. con. pictxtbotom{width:250px;            height:165px;        margin-top:20px; } </style>

JavaScript code:

   <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>   <!--使用调用方法-->   <script>        //找元素 $("")        $("#container .text").hover(function(){            $(this).find("p").animate({bottom:"0px"})        },function(){            $(this).find("p").animate({bottom:"-30px"})        });   </script>

Web front-end small white case-mouse move to move out effect