/**
 *CSS鼠标滑过特效
 * 2016年7月3日 14:26:05
 * 作者：imo
 * 反馈：805500091@qq.com 
 * 轻点喷...
 **/

/*****全局通用*****/
*{padding:0;margin:0;font-family:"微软雅黑"}
h2{margin:15px 0;font-weight: 300;}
.content{margin: 0 auto;max-width:728px;margin-top:20px;text-align:center}


/*****鼠标悬停图片变大文字消失*****/
.style1 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style1 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
.style1 ul li img{width: 170px;height: 120px;border-radius: 2px;}
.style1 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
.style1 ul li:hover {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }
.style1 ul li:hover span{ opacity:0}

/*****鼠标悬停文字消失*****/
.style2 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style2 ul li img{width: 170px;height: 120px;border-radius: 2px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
.style2 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
.style2 ul li:hover span{ opacity:0}

/*****鼠标悬停整体旋转*****/
.style3 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style3 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
.style3 ul li img{width: 170px;height: 120px;border-radius: 2px;}
.style3 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.style3 ul li:hover { transform:rotate(360deg);-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg);  -ms-transform:rotate(360deg);}


/*****鼠标悬停整体旋转放大*****/
.style4 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style4 ul li{transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}
.style4 ul li img{width: 170px;height: 120px;border-radius: 2px;}
.style4 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.style4 ul li:hover {transform:rotate(360deg) scale(1.2);    -webkit-transform:rotate(360deg) scale(1.2);    -moz-transform:rotate(360deg) scale(1.2);    -o-transform:rotate(360deg) scale(1.2);    -ms-transform:rotate(360deg) scale(1.2);}


/*****鼠标悬停整体上升*****/
.style5 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style5 ul li{transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}
.style5 ul li img{width: 170px;height: 120px;border-radius: 2px;}
.style5 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.style5 ul li:hover {transform:translate(0,-10px);    -webkit-transform:translate(0,-10px);    -moz-transform:translate(0,-10px);    -o-transform:translate(0,-10px);    -ms-transform:translate(0,-10px);}