纯CSS图片缩放后显示详细信息

哎~！突然好久没更新博客了，最近总在下雨，晚上也经常没有时间来管理博客（目前在敲自己的一个平台，晢时还在写逻辑层的代码），好吧！废话不多说了，言归正传。

现在很多图片缩放的特效大多数都是用javascript来写的，当然了，其实还可以使用CSS来写。下边图片是效果触发前和触发后的图片。

（触发前）

（触发后）

实现原理很简单，先看HTML代码：

1 <div class="view view-first">
2     <a target="_blank" href="#" class="new-product-image"><img src="data:images/china.jpg"></a>
3     <div class="mask">
4         <h4 class="title"><a title="中国茶城" class="text-hide" target="_blank" href="#">中国茶城</a></h4>
5         <p class="text">云南普洱，2003年5月普洱被中国茶叶流通协会命名为“中国茶城”，普洱茶成为普洱走向全国乃至世界的一张标志性名片。</p>
6     </div>
7 </div>

另外是CSS：

.view-first{position:relative;}
.view-first img{-webkit-transition:all .2s ease-in; -moz-transition:all .2s ease-in; -o-transition:all .2s ease-in; -ms-transition:all .2s ease-in; transition:all .2s ease-in;}
div.mask-hover img, .view:hover img{width:100px; height:100px;}
.view{position:relative; text-align:center; cursor:default; width:190px; height:238px; margin-left:auto; margin-right:auto; overflow:hidden;}
.view .mask{width:160px; overflow:hidden; margin:0 auto;}
.view .title{text-align:center; position:relative; font-size:12px; margin-top:16px; height:20px; line-height:20px;}
.view .title a{ color:#666; text-decoration:none;}
.view .text{position:relative; text-align:left; font:normal 12px/16px '宋体'; color:#999;}

好了！这样就大功造成了！但是因为高度值是固定值的，如果用在实际项目中可能会引起一些问题，不过这也算是使用纯CSS编写的缺点，如果能有更好的解决方案！我相信目前只能用jQuery或者Javascript来写，当然了，现在CSS3已经强大到可以做动画了（国外听说已经有牛人使用纯CSS3做了个动画）。好了，休息了！

转载于:https://www.cnblogs.com/yuanusihif/p/3393296.html

纯CSS图片缩放后显示详细信息相关推荐

.Net有关问题。在GridView中添加了一个HyperLinkField，用来显示显示详细信息，请教跳转后的详细信息页面该怎样写代码
.Net问题...在GridView中添加了一个HyperLinkField,用来显示显示详细信息,请问跳转后的详细信息页面该怎样写代码在一个页面的GridView中添加了下面的代码: <as ...
table表格信息过长显示省略，悬停显示详细信息；表格添加细边框
一.table表格信息过长显示省略...,悬停显示详细信息需求:表格td宽度设置百分比或者固定宽度,如果内容过长自动截掉并在文本末尾显示...,鼠标移动到文字上面显示全部内容: (基于bootstr ...
css 加载图片,纯CSS图片预加载
译自:[Creating a CSS Image Preloader](http://www.devirtuoso.com/2009/07/creating-a-css-image-preloader ...
[css] css图片缩放失真出现锯齿的如何解决呢？
[css] css图片缩放失真出现锯齿的如何解决呢? 1.-ms-interpolation-mode,这是针对IE的解决方案.其值设置为bicubic. 2.image-rendering,这是提供 ...
html中点击提交按钮显示提交i成功,百里香叶：点击提交按钮后显示成功信息
我有一个spring-boot申请,Thymeleaf.我有非常基本的情况.有一个表单,当用户点击提交按钮时,表单数据应发送到控制器,但在同一页面中应显示成功消息.百里香叶:点击提交按钮后显示成功信息 ...
win10 显示详细信息窗格
win10 显示详细信息窗格 CreateTime--2018年5月26日09点13分 Author:Marydon 1.说明: win10无法像win7那样将详细信息窗格显示在窗口的底部,只能显示在 ...
html 图片缩小后模糊,css图片缩放失真出现锯齿的如何解决呢？
IE6 图片缩小后会出现锯齿的问题 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
纯css模拟液晶式显示数字时间
首先是借鉴了yiminghe大虾的创意和思路(http://www.iteye.com/topic/705529),可惜看到帖子的时候里面的demo已经打不开了,所以决定自己也做一个. 我觉得他画的数 ...
微信小程序地图标记点marker，点击标记点显示详细信息
项目中想要实现的效果在地图上显示所有数据标点,点击显示详情信息,首先看一下图片是否符合各位的需求,在这里也是学习加深一下直接上代码: wxml: <map id="myMap&quo ...

纯CSS图片缩放后显示详细信息

纯CSS图片缩放后显示详细信息相关推荐

最新文章

热门文章