今天来看一组纯CSS实现的鼠标悬停效果,在线研究代码点效果一、效果二、效果三,下载收藏点这里,效果预览点这里。
效果1
效果1的html文件
- <div class="pic">
- <img src="pic.jpg" alt="">
- <span>这里是个标题呀</span>
- </div>
- /* 图片盒子的样式,宽高、边框、阴影、位置、鼠标样式、溢出 */
- .pic{
- width: 500px;
- height: 500px;
- border: 10px solid #333;
- box-shadow: 0 0 10px rgba(0,0,0,.6);
- margin: 50px auto;
- position: relative;
- overflow: hidden;
- cursor: pointer;
- }
- /* 图片标题的样式,宽高、背景色、水平垂直居中、定位,透明度 */
- .pic span{
- position: absolute;
- left: 0;
- bottom: 0;
- width: 500px;
- height: 50px;
- background: rgba(0,0,0,.5);
- color: #fff;
- font-size: 24px;
- line-height: 50px;
- text-align: center;
- opacity: 0;
- }
- /* 给需要动画的元素加过渡属性 */
- .pic img,.pic span{
- transition: all .5s;
- }
- /* hover之后透明动画 */
- .pic:hover span{
- opacity: 1;
- }
- /* hover之后图片放大的效果 */
- .pic:hover img{
- transform: scale(2);
- }
效果2
下面看效果2,上下滑动打开的实现过程。首先看html文件,我们需要两个图片元素,一个显示上半部分,一个显示下半部分。
- <div class="pic">
- <img class="top" src="pic.jpg" alt="top">
- <img class="bottom" src="pic.jpg" alt="bottom">
- <span>OK,You can see it.</span>
- </div>
- /* 图像盒子的样式设置,宽高、边框、阴影、溢出、位置 */
- div.pic{
- width: 500px;
- height: 500px;
- cursor: pointer;
- margin: 50px auto;
- position: relative;
- overflow: hidden;
- border: 10px solid #333;
- box-shadow: 0 0 10px rgba(0,0,0,.8);
- }
- /* 上下两半部分的统一设置,绝对定位和过渡 */
- div.pic img{
- position: absolute;
- left: 0;
- transition: all 1s;
- }
- /* 上半部分图像的裁剪和定位 */
- div.pic img.top{
- top: 0;
- clip: rect(0px,500px,250px,0px);
- }
- /* 下半部分图像的裁剪和定位 */
- div.pic img.bottom{
- bottom: 0;
- clip: rect(250px,500px,500px,0px);
- }
- /* hover之后图像的定位改变 */
- div.pic:hover img.top{
- top: -50px;
- }
- div.pic:hover img.bottom{
- bottom: -50px;
- }
- /* 图像标题的样式设置,文字颜色、水平居中、垂直居中 */
- div.pic span{
- display: inline-block;;
- width: 100%;
- text-align: center;
- line-height: 500px;
- font-size: 24px;
- }