.figcaption { width:277px; height:290px; background:url("http://www.jq22.com/img/cs/500x500b.png") no-repeat; background-size:100% 100%; position:relative; overflow:hidden; } .figcaption:hover img { transform:scale(3,3); opacity:0; transition:all 0.5s ease-in-out; } .figcaption:hover .more { transform:scale(1,1) rotate(0deg); opacity:1; transition:all 0.5s ease-in-out; } .more { background:skyblue; width:60px; height:40px; text-align:center; line-height:40px; position:absolute; top:50%; left:50%; margin-left:-30px; margin-top:-20px; transition:0.3s ease-in-out; transform-origin:50% 50%; transform:scale(0,0) rotate(-45deg);