纯css划上图片显示文字

<div class="animate">
    <ul>
        <li class="box imgSc">
            <img src="http://www.jq22.com/img/cs/500x300-1.png" alt="">
            <div class="text text1">This is my life</div>
        </li>
        <li class="box imgSc">
            <img src="http://www.jq22.com/img/cs/500x300-2.png" alt="">
            <div class="text text2">This is my life</div>
        </li>
        <li class="box imgSc">
            <img src="http://www.jq22.com/img/cs/500x300-3.png" alt="">
            <div class="text text3">This is my life</div>
        </li>
        <li class="box4  imgSc">
            <img src="http://www.jq22.com/img/cs/500x300-4.png" alt="">
            <div class="text4">
                <p>This is my life</p>
            </div>
        </li>
        <li class="box5 imgSc">
            <img src="http://www.jq22.com/img/cs/500x300-5.png" alt="">
            <div class="left"></div>
            <div class="right"></div>
            <p>This is my life</p>
        </li>
        <li class="box6">
            <img src="http://www.jq22.com/img/cs/500x300-6.png">
            <div class="ani1"></div>
            <div class="ani2"></div>
            <p>This is my life</p>
        </li>
        <li class="box7">
            <img src="http://www.jq22.com/img/cs/500x300-7.png" alt="">
            <div>This is my life</div>
            <p>This is my life</p>
        </li>
        <li class="box8">
            <img class="img1" src="http://www.jq22.com/img/cs/500x300-1.png">
            <img class="img2" src="http://www.jq22.com/img/cs/500x300-2.png">
        </li>
    </ul>
</div>

* {
	padding:0;
	margin:0;
}
ul,li,ol {
	list-style:none;
}
.animate ul li {
	width:400px;
	height:300px;
	float:left;
	margin:10px;
	cursor:pointer;
	position:relative;
	overflow:hidden;
}
.animate ul li img {
	width:100%;
	height:100%;
	transition:all 0.4s ease;
}
.text,.text4 {
	width:100%;
	height:100%;
	text-align:center;
	line-height:300px;
	position:absolute;
	background:rgba(0,0,0,0.2);
	transition:all 0.4s ease;
	color:#fff;
	font-size:20px;
}
.text1 {
	top:300px;
	left:0;
}
.text2 {
	top:300px;
	left:400px;
}
.text3 {
	top:-300px;
	left:0;
}
.animate ul .box:hover .text {
	top:0;
	left:0;
}
.text4 {
	top:0;
	left:0;
	opacity:0;
}
.text4 p {
	width:100%;
	height:100%;
	transition:all 0.4s ease;
}
.animate ul .imgSc:hover img {
	transform:scale(1.2);
}
.box4:hover .text4 {
	background:rgba(0,0,0,0.2);
	opacity:1;
}
.box4:hover .text4 p {
	border:2px solid #000000;
	transform:scale(0.8);
	background:rgba(255,255,255,0.1);
}
.left,.right {
	position:absolute;
	top:0;
	width:50%;
	height:100%;
	background:rgba(0,0,0,0.2);
	transition:all 0.3s ease;
}
.box5 p {
	width:100%;
	color:#fff;
	height:20px;
	position:absolute;
	top:-20px;
	left:0;
	transition:all 0.3s ease;
	text-align:center;
}
.box5:hover p {
	top:140px;
}
.left {
	left:-50%;
}
.right {
	right:-50%;
}
li:hover .left {
	left:0;
}
li:hover .right {
	right:0;
}
.box7 div {
	position:absolute;
	top:0;
	left:0;
	width:99%;
	height:99%;
	transition:all 0.5s;
	transform:rotateX(90deg) rotateY(90deg);
	background:rgba(0,0,0,.2);
	color:#fff;
	text-align:center;
	line-height:300px;
}
.box7:hover div {
	transform:rotateX(0deg);
}
.box8 {
	transform-style:preserve-3d;
	perspective:500px;
}
.box8:hover .img2 {
	transform:rotateY(180deg);
	opacity:0;
}
.img1 {
	opacity:0;
}
.box8:hover .img1 {
	transform:rotateY(0deg);
	opacity:1;
}
img {
	position:absolute;
	top:0;
	left:0;
}
.img1 {
	transform:rotateY(180deg);
}
.box6 p {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	color:#fff;
	text-align:center;
	transition:all 0.5s;
	transform:translateY(-20px);
}
.box6:hover p {
	transform:translateY(140px);
}
.ani1 {
	position:absolute;
	top:0;
	left:0;
	width:500px;
	height:300px;
	background:rgba(0,0,0,0.2);
	transform:rotate(37deg) translate(0px,240px);
	transform-origin:left top;
	transition:all 0.5s;
}
.ani2 {
	position:absolute;
	top:0;
	width:500px;
	height:300px;
	background:rgba(0,0,0,0.2);
	transform:rotate(37deg) translate(100px,-240px);
	transform-origin:right top;
	transition:all 0.5s;
}
.box6:hover .ani1 {
	transform:rotate(37deg) translate(0px,0px);
}
.box6:hover .ani2 {
	transform:rotate(37deg) translate(100px,0px);
}