html图片纵向变,【转】15个CSS图片悬浮效果

先睹为快

在开始之前，先欣赏一下所有将要在本文中创造的悬浮效果,点击图片查看。

设置

在开始创造独特的演示之前，需要先做一些基本的设置。下面的CSS用来定义所有例子的基本显示。

大部分是一些基本的设置：box-sizing允许我们控制整个盒模型(如果不喜欢可以自行修改)，pic类为单张图片定义样式。

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

}

body {

background: #333;

}

.pic {

border: 10px solid #fff; float: left;

height: 300px;

width: 300px;

margin: 20px;

overflow: hidden;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111; }

缩放和平移

第一组效果包含了一些利用隐藏overflow的技巧，利用div边界对图片进行裁剪，我们可以完成一些非常奇妙的悬浮效果。

点击 Demo 或图片查看全部演示：

放大

当鼠标悬浮的时候，虽然图片在放大，但始终处于界限范围之内，所以给人一种拉近焦距的感觉。

HTML

可以发现，我们在pic类之前伴随着grow类，跟往常一样，我们的图片由 Lorem

Pixel 提供，图片大小为400px＊400px。

CSS

.grow img {

height: 300px;

width: 300px;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.grow img:hover {

width: 400px;

height: 400px;

}

在这里我们把图片标签作为目标，先把图片设置为高度为300px的正方形，当悬浮的时候变成400px。由于我们把ov