Css3 move the mouse up, css3 move the mouse up

Css3 move the mouse up, css3 move the mouse up

The functions of css3 are really powerful, and there is no end to learning. If you don't talk about it, go directly to the code.

Css section:

<style>
    *{margin: 0; padding: 0;}
    .text-center{text-align:center}
    .col_cont{width:300px;height:300px;margin:auto}
    .thumbnail{cursor:pointer;text-decoration:none;display:block;padding:4px;height:200px;font-weight:bold;">#fff;border:1px solid #ddd; }
    .thumbnail img, .thumbnail h3{transition:all .5s;-webkit-transition:all .5s;-ms-transition:all .5s;}
    .thumbnail img{width:35%;margin-top:30px}
    .thumbnail h3{color:silver}
    .thumbnail:hover img{-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-ms-transform:translateY(-20px);
        -o-transform:translateY(-20px);transform:translateY(-20px)}
    .thumbnail:hover h3{color:#2c3e50}
</style>

Html section:

<div class="col_cont">

<A class = "thumbnail text-center">

<Div class = "caption">
<H3> product introduction </Div>
</A>
</Div>