<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. Nginx 的基本概念

    Nginx 简介 什么是 Nginx Nginx 是一个高性能的 HTTP 和 反向代理 web服务器 占用内存少,并发能力强,高性能,热部署 但不支持 Java,Java 得配合 tomcat 使用 ...

  2. zabbix监控添加学习笔记

    在实际生产环境中,除了CPU.内存等一些系统信息可以挂载zabbix的自带模板Template OS Linux:但是一些公司开发的定制服务需要自己写模板或者监控项去监控: 一.监控公司的java服务 ...

  3. Go语言基础六：结构体和方法

    结构体 结构体是一个由用户定义的复合类型,它由一系列属性组成,每个属性都有自己的类型和值.Go语言中数组可以存储同一类型的数据,但在结构体中用户可以为不同项定义不同(或相同)的数据类型.结构体是值类型 ...

  4. python 可变、不可变类型、深拷贝、浅拷贝理解

    简介 python中数据分为可变类型,不可变类型.不同的数据类型影响着不同情况下的深浅拷贝. 下面则将简要介绍一下 可变类型 当某个数据的值发生改变时,它对应的内存地址不发生改变,常见的有列表.字典. ...

  5. 哎，又跟HR在小群吵了一架！

    原创不易,求分享.求一键三连 书接上文: 跟HR在大群吵了一架... 难道,降本增效就是裁员吗 前段时间我问了自己一个问题,如果自己真的是公司内部的外包团队,会怎么样?自从思维转变后,很多事情居然得到 ...

  6. 网络编程、OSI七层协议

    目录 软件开发架构 1.什么是软件开发架构 2.软件开发架构 3.架构优劣势 4.架构发展趋势 网络编程简介 1.如何理解网络编程 2.网络编程的目的 3.网络编程的意义 4.网络编程的起源 5.网络 ...

  7. Kafka部署安装

    一.环境准备 1.jdk 8+ 2.zookeeper 3.kafka 说明:在kafka较新版本中已经集成了zookeeper,所以不用单独安装zookeeper,只需要在kafka文件目录中启动z ...

  8. 使用 DolphinScheduler 调度 Kylin 构建

    本文章经授权转载 Apache Kylin 上游通常有复杂的数据 ETL 过程,如 Hive 入库.数据清洗等:下游有报表刷新,邮件分发等.集成 Apache DolphinScheduler 后,K ...

  9. java-前端之js

    js: js的三种形式: <!-- 事件:就是用户的操作或者动作,就是js被调用的时机:如:单机事件,双击事件 --> <!-- 1.事件定义式:在定义事件时直接写js --> ...

  10. Excel 名称管理器是什么，并实现一个级联选择框

    名称 在 Excel 中,每一个单元格都有自己的名称.表格横向是字母,纵向是数字,组合起来就是一个单元格的名称. A13 所代表的是 A 列,13 行的单元格.把一组单元格组合起来,加上一个名称,在 ...