CSS effects, mouse on the display title description

Mouse put up, appear shielding layer, title, description, the first has a three-up sliding effect, the second has a gradient effect

The two CSS implementations are as follows:

1. CSS style effects

1 <style type= "Text/css" >2 3 *{4 margin:0;5 padding:06}7 8 Body{Font:14px/150% ' Microsoft Yahei ', Tahoma, Helvetica, Arial, Sans-serif;Color:#424242;background:#fff;}9 a{Color:#369/*#424242*/;text-decoration:None;}Ten a:hover{Color:#f60;text-decoration:Underline} One img{Border:None} A ul{List-style:None} -  - Li{ the List-style:None; - float: Left; - width:200px; - Height:120px; + margin:6px 5px; - Border:1px solid #d3d3d3; +} A  at . SL{ - background:#fe7253; - padding:0; - margin:0; - position:relative; - box-sizing:Border-box; in cursor:Pointer; - -webkit-transition:All . 4s ease-in-out; to -moz-transition:All . 4s ease-in-out; + -o-transition:All . 4s ease-in-out; - -ms-transition:All . 4s ease-in-out; the transition:All . 4s ease-in-out; * Overflow:Hidden; $}Panax Notoginseng  - . sl. sl_img{ the position:relative; + Display:Block; A width:100%; the padding:0; + margin:0; - Opacity:1; $ Overflow:Hidden; $} -  - . sl. Sl_ca{ the position:Absolute; - Top:0;Wuyi  Left:0; the width:100%; - Height:100%; Wu margin:0; - padding:0; About      $ Color:#fff; - background:Rgba (135, 200,0); - -moz-backface-visibility:Hidden; - -webkit-backface-visibility:Hidden; A backface-visibility:Hidden; + -webkit-transform:Translate3d (0,-100%,0); the -moz-transform:Translate3d (0,-100%,0); - -o-transform:Translate3d (0,-100%,0); $ -ms-transform:Translate3d (0,-100%,0); the Transform:Translate3d (0,-100%,0); the -webkit-transition:All . 4s ease-in-out; the -moz-transition:All . 4s ease-in-out; the -o-transition:All . 4s ease-in-out; - -ms-transition:All . 4s ease-in-out; in transition:All . 4s ease-in-out; the Overflow:Hidden; the} About  the . Sl:hover. Sl_ca{ the background:Rgba (135, 200,.8); the -webkit-transform:Translate3d (0,0,0); + -moz-transform:Translate3d (0,0,0); - -o-transform:Translate3d (0,0,0); the -ms-transform:Translate3d (0,0,0);Bayi Transform:Translate3d (0,0,0); the  the . sl. sl_ca1{ - position:Absolute; - Top:0; the  Left:0; the width:100%; the Height:100%; the margin:0; - padding:0; the      the Color:#fff; the background:Rgba (135, 200,0);94 -moz-backface-visibility:Hidden; the -webkit-backface-visibility:Hidden; the backface-visibility:Hidden; the -webkit-transition:All . 4s ease-in-out;98 -moz-transition:All . 4s ease-in-out; About -o-transition:All . 4s ease-in-out; - -ms-transition:All . 4s ease-in-out;101 transition:All . 4s ease-in-out;102 Overflow:Hidden;103}104  the . Sl:hover. SL_CA1{106 background:Rgba (135, 200,.8);107}108 109 . sl. sl_ca_h{ the font-size:1.3em;111 Font-weight: the; the text-align:Center;113 position:Absolute; the Top:-50%; the  Left:0%; the width:100%;117 -webkit-transition:All . 5s Ease-in-out;118 -moz-transition:All . 5s Ease-in-out;119 -o-transition:All . 5s Ease-in-out; - -ms-transition:All . 5s Ease-in-out;121 transition:All . 5s Ease-in-out;122 Overflow:Hidden;123 Opacity:0;124} the 126 . Sl:hover. Sl_ca_h{127 Color:#fff; - Top:25%;129 Opacity:1; the}131  the . sl. sl_ca_p{133 font-size:1em;134 text-align:Center;135 width:80%;136 position:Absolute;137 Top:-50%;138  Left:10%;139 -webkit-transition:All . 6s Ease-in-out; $ -moz-transition:All . 6s Ease-in-out;141 -o-transition:All . 6s Ease-in-out;142 -ms-transition:All . 6s Ease-in-out;143 transition:All . 6s Ease-in-out;144 Overflow:Hidden;145 Opacity:0;146}147 148 . Sl:hover. Sl_ca_p{149 Color:#fff; Max Top:45%;151 Opacity:1; the}153 154 </style>

The following tags are used:

<li>    <div class= "SL" >            <div class= "Sl_ca" >            
This article is for learning use only
CSS effects, mouse on the display title description