<style>
 #div{
    text-align: center;
 }
 .img{
    width: 200px;
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
    transition: 1s clip-path;
    
 }
 .img:hover{
    clip-path: polygon(0 0,100% 0%,100% 100%,0 100%);
 }
</style>

<body>
   <div id="div">
   <img src="img/portfolio-1.jpg" class="img" >
   <img src="img/portfolio-2.jpg" class="img" >
   <img src="img/portfolio-3.jpg" class="img" >
   <img src="img/portfolio-4.jpg" class="img" >
   <img src="img/portfolio-5.jpg" class="img" >
   </div>
</body>

css 悬停图片改变图片的样式的更多相关文章

  1. iOS学习-压缩图片(改变图片的宽高)

    压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...

  2. CSS也可以改变图片幅面尺寸

    一般情况下,只有<img />标签中的图片,可以根据宽高设定来改变大小. 比如1024x768的图,我们设width="640",height="480&qu ...

  3. CSS cursor 属性改变鼠标的样式

    可能的值 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默 ...

  4. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  5. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  6. jQuery的鼠标悬停时放大图片的效果

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  7. 基于jQuery的鼠标悬停时放大图片的效果制作

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  8. CSS Image Sprite--网页图片应用处理方式

    CSS Sprites简介 CSSSprites在国内很多人叫css精 灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...

  9. css sprite---css精灵网页图片应用处理方式分析

    CSSSprites,在前端图片处理中经常用到的一种高效方法,下面参考百度百科的总结,非常到位,学习一下吧! CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页 ...

随机推荐

  1. 【Azure 应用服务】本地创建Azure Function Kafka Trigger 函数和Kafka output的HTTP Trigger函数实验

    问题描述 在上一篇博文(https://www.cnblogs.com/lulight/p/16525902.html)中,我们成功的以VM作为Kafka服务器运行,并且验证了从其他机器中远程访问.在 ...

  2. Spark: Cluster Computing with Working Sets

    本文是对spark作者早期论文<Spark: Cluster Computing with Working Sets>做的翻译(谷歌翻译),文章比较理论,阅读起来稍微有些吃力,但读完之后总 ...

  3. 使用JMeter进行MySQL的压力测试

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 目录 前言 1. JMeter安装 2. 导入MyS ...

  4. 爬虫简介与excel表格操作

    爬虫简介与excel表格操作 re模块简介 1.在python中使用正则表达式的话那么re模块就是选择之一 import re # 导入re模块 2.在re模块中使用findall找到所有我们给他的值 ...

  5. CF1019B The hat （二分）

    题面 题解 如果位置为i的人与对面的差是x,i+1位置由于只能+1或-1,所以i+1位置与对面的差就是x.x+2或x-2,可以发现,奇偶性不变. 所以只要判断出是奇差,就可以直接输出"! - ...

  6. C#基础_C#计算样本标准差和总体标准差

    首先我们先了解样本标准差和总体标准差: 样本标准差=方差的算术平方根=s=sqrt(((x1-x)^2 +(x2-x)^2 +......(xn-x)^2)/(n-1)) 总体标准差=σ=sqrt(( ...

  7. 【mido】python的midi处理库

    安装mido库:pip install mido pipy地址:https://pypi.org/project/mido/ mido官方文档:https://mido.readthedocs.io/ ...

  8. C++ 对于函数名的操作，函数名本身和取*以及取&的区别

    void TestFunc() { } int _tmain(int argc, _TCHAR* argv[]) { cout<<TestFunc<<endl; cout< ...

  9. 第二十八篇:关于node.js连接数据库

    好家伙,这个不难,但是也不简单. $ cnpm install mysql 教程里是带美元符的,但是我打的时候加上美元符用不了,所以我就没用美元符了,一样能行. 还有,淘宝镜像,yyds, var m ...

  10. openstack 搭建详细步骤

    该博文转载于(https://www.cnblogs.com/whwh/p/16200004.html) 一.openstack单点部署 1.配置虚拟机NAT网络连接 查看vmware的NAT网络默认 ...