css如何给这种div包裹的图片，增加点击效果呀，没有效果，只是鼠标变成小手，很呆板？

Question

Answer 1

几个思路：

1. 鼠标放上去的时候图片变大，用transform: scale(1.2)这样
2. 鼠标点击之后图片周围出现晕染然后消失:图片外层套一个div，定位到图片的后面，给这个div加效果
3. 如果你的文字和背景图是分离的，还可以做把鼠标放上去，背景图旋转一圈
4. 如果你的文字和背景图是分离的，鼠标移上去之后，文字从左到右依次进入或显示
5. 点击之后做一个按下去的效果
6. 鼠标放上去跳几下，就像皮球那样？
7. css可以画六边形的，如果题主有兴致，可以画出来，效果就可以更多样了，还能改变背景色呀，改变背景图图案呀什么的
8. ...

想到再补充,也可以参考ppt里面的那些动画效果

我觉得效果这种东西还是问设计比较靠谱-o-如果需要实现代码就回复数字吧-o-

Answer 2

这种一般都是给那个包裹的div设置点击效果，点击设置你想要得点击效果，比如：边框、阴影。
<div class="button">

<img src="colorful1.png">

</div>
css

.button{
    border:none;
    width: 100px;
    height: 100px;
    
}
.button:active{
    box-shadow: 1px 2px 2px #fff;
}

Answer 3

图片放大：

div:hover {
    transform: scale(1.2);
    transform-origin: center;
    transition: all 0.3s ease-in-out;
}

Answer 4

可以给:hover添加一些样式

Answer 5

直接给网址胜千言
http://ianlunn.github.io/Hover