lixin-web/webapp/css/game-athletic.css

vue and bootstrap

.game-main2 ul li{    max-width: 195px;position: relative;float: left;margin-right: 10px;text-align: center;overflow: hidden;}
.game-main2 ul li div:nth-child(2) span{display:block;position: absolute;height: 100%;width: 100%;background: rgba(0,0,0,0.3);top: 0;opacity: 0;}
.game-main2 ul li div:nth-child(2) img{position:absolute;top:40%;margin-left: 110px;
-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.pull-left .p3{ line-height:25px; color:#787876;}
.game-main2{max-width: 980px;margin: 0 auto;overflow: auto;}
.game-main2 .pull-right{color: #fff;text-align: center;position: relative;}
.game-main2 .pull-right{width: 270px;height: 616px;}
.game-main2 .pull-left{width: 710px;text-align: center;}
.game-main2 .pull-left{padding: 60px 30px 0 0;width: 650px;}
.game-main2 .pull-right{background: url(../img/game_live/77.jpg);}

 
.btm{height: 80px;background: #474b4e;position: absolute;bottom: 0;width: 100%;cursor: pointer;}
.btm .fl{
	float: left;
	background:#00c4ff;
	height:80px;
	padding: 9px 20px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	}
.btm .fr{line-height: 80px;font-size: 16px;}
.btm:hover .fl{width: 0;padding: 9px 0}
.btm:hover .fl img{display:none;}
.game-main2 ul li:hover div:nth-child(2) span{opacity: 1;}
.game-main2 ul li .sp1{    z-index: 10;position: absolute;bottom: 0;width: 100%;background: #464646;left: 0;color:#fff;}
.game-main2  .pull-right h1{font-size: 60px;font-weight: bold;    margin-top: 150px;}
.game-main2  .pull-right .p1{font-size: 26px;}
.game-main2 ul li .sp1 p{margin: 0;line-height: 36px;}
.game-main2 ul li:hover div:nth-child(2){opacity: 1}
.game-main2 ul li:hover div:nth-child(2) img{
	 -moz-transform: translateX(-150px);
    -webkit-transform: translateX(-150px);
    -o-transform: translateX(-150px);
    -ms-transform: translateX(-150px);
    transform: translateX(-150px);      
}
.game-main2 ul li:hover .sp1{background: #00c4ff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.game-main2 ul li:hover div:nth-child(2) span{opacity: 1;}
.game-main2 ul li .sp1{    z-index: 10;position: absolute;}
@media screen and (max-width:768px){
	.game-main2{width:100%}
	.game-main2 .pull-left{width:100%;padding:0 15px;}
	
	.game-main2 ul li{width:100%;max-width: 100%;margin-bottom:15px}
	.game-main2 ul li div:nth-child(1) img{width:100%;}
	.game-main2 ul li div:nth-child(2){display:none}

	}