ourai/hover_display.html

## hover_display.html
<!DOCTYPE>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      div,
      img,
      button {
        display: block;
        margin: 0;
        padding: 0;
        box-sizing: content-box;
      }

      div {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        border: 1px solid #F00;
      }

      img {
        border: none;
        width: 100%;
        height: 100%;
      }

      button {
        background-color: #333;
        border: none;
        color: #FFF;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        bottom: -30px;
        left: 0;
        width: 100%;
        cursor: pointer;
        transition: bottom .5s;
      }

      div:hover button {
        transition: bottom .5s;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="http://dev.ourai.ws/assets/images/header-home.jpg">
      <button type="button">保存图片</button>
    </div>
  </body>
</html>
	<!DOCTYPE>
	<html>
	<head>
	<meta charset="UTF-8">
	<style>
	div,
	img,
	button {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: content-box;
	}

	div {
	width: 200px;
	height: 200px;
	position: relative;
	overflow: hidden;
	border: 1px solid #F00;
	}

	img {
	border: none;
	width: 100%;
	height: 100%;
	}

	button {
	background-color: #333;
	border: none;
	color: #FFF;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: absolute;
	bottom: -30px;
	left: 0;
	width: 100%;
	cursor: pointer;
	transition: bottom .5s;
	}

	div:hover button {
	transition: bottom .5s;
	bottom: 0;
	}
	</style>
	</head>
	<body>
	<div>
	<img src="http://dev.ourai.ws/assets/images/header-home.jpg">
	<button type="button">保存图片</button>
	</div>
	</body>
	</html>