<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>Transform</title>
<style type="text/css">
.test-box{
width:600px
margin:50px auto}
.pic{
-webkit-transition:all 1s ease-in-out
transition:all 1s ease-in-out
cursor:pointer}
.top-pic{
position:absolute
transform:scale(0,0)}
.test-box:hover .top-pic{
-webkit-transform-origin:top right
-webkit-transform:scale(1,1)}
.test-box:hover .bot-pic{
-webkit-transform:scale(0,0)
-webkit-transform-origin:bottom left
opacity: .5
-webkit-transform:rotate(120deg)
-webkit-transform-origin:bottom left
}
</style>
</head>
<body>
<div class="test-box">
<img class="pic top-pic" src="test-pic01.jpg" />
<img class="pic bot-pic" src="test-pic02.jpg" />
</div>
</body>
</html>
随便写了几个效果，没有用到JS，不过要用到JS只要把触发事件替换掉上面的hover就行了，比如：
$(".button").click(function () {
。。。
})
这里面用到CSS3，所以请不要用IE11以下的低版本浏览器，不然你啥都看不见
应该是缓存的问题可以适当清理浏览器缓存，其次我觉得你既然加上了背景就没有必要加颜色了，如果真的没作用建议你换一下图片格式做测试 还有就是<style>里应该加上属性type="text/css" 一下是我的代码请供参考:
<style type="text/css">div{
background: url("easyui/themes/metro-red/images/panel_tools.png")
background-repeat:no-repeat
width: 100px
height: 100px
}
</style>
</head>
<body>
<div></div>
</body>
<style>*{ padding:0margin:0font-size:14px }
.pa{ position:relativewidth:148pxheight:148pxborder:1px solid #cccfloat:leftmargin:10px 0 10px 10px }
.pa img{ width:100% }
.hide-div{ position:absolutewidth:100%height:100%background-color:rgba(0,0,0,.35)left:0top:0display:none }
.pa:hover .hide-div{ display:block }
.hide-div a{ display:blockwidth:50%height:24pxline-height:24pxtext-align:centerbackground-color:#1D82FEcolor:#FFFtext-decoration:noneposition:absolutemargin:autotop:0bottom:0left:0right:0border-radius:12px }
</style>
</head>
<body>
<div class="pa">
<img src="https://img.alicdn.com/imgextra/i2/2344162546/TB2DpUNqYBmpuFjSZFuXXaG_XXa_!!2344162546.jpg"/>
<div class="hide-div">
<a href="#">预览</a>
</div>
</div>
<div class="pa">
<img src="https://img.alicdn.com/imgextra/i4/2344162546/TB2Q4MlqtFopuFjSZFHXXbSlXXa_!!2344162546.jpg"/>
<div class="hide-div">
<a href="#">预览</a>
</div>
</div>
</body>
