<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. DongDong认亲戚 来源：牛客网

    题目 链接:https://ac.nowcoder.com/acm/contest/28886/1021 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K, ...

  2. python不同平台进程的启动与终止

    Liunx进程的启动与终止 在使用subprocess创建进程时需要将所有进程设置为一个进程组 preexec_fn:只在 Unix 平台下有效,用于指定一个可执行对象(callable object ...

  3. AOP实现切入

    6.AOP实现切入 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程 通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术 AOP是OOP的延续,也 ...

  4. react实战系列 —— react 的第一个组件

    react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...

  5. Apache DolphinScheduler 1.3.8 发布

    小伙伴们  Apache DolphinScheduler 1.3.8 发布 2021年9月7日,正式发布 在 1.3.8 版本中,我们在 Docker&k8s 这里做了许多优化,Docker ...

  6. Windows下安装新硬盘

    首先,插上一个硬盘然后开机,会发现"我的电脑/此电脑"里面并没有这个硬盘,这是因为此时硬盘还没初始化和分区,分完区后每个分区会被作为一个逻辑盘显示在里面.那么接下来就是过程. Wi ...

  7. Luogu2343 宝石管理系统（平衡树）

    平衡树维护总第K大:插入 #include <iostream> #include <cstdio> #include <cstring> #include < ...

  8. Python自动化测试之文件操作

    1.读.写.追加文件 读:打开文件  r    读写:r+ 写:w 可写不可读  清空原文件   写读:w+ 清空文件 追加:a+  可以读写,文件不存在自动创建 练习读txt文件类容: #-*- c ...

  9. [RootersCTF2019]I_<3_Flask-1|SSTI注入

    1.打开之后很明显的提示flask框架,但是未提供参数,在源代码中发现了一个git地址,打开之后也是没有啥用,结果如下: 2.这里我们首先需要爆破出来参数进行信息的传递,就需要使用Arjun这一款工具 ...

  10. [HNOI2011]卡农 （数论计数，DP）

    题面 原题面 众所周知卡农是一种复调音乐的写作技法,小余在听卡农音乐时灵感大发,发明了一种新的音乐谱写规则. 他将声音分成 n n n 个音阶,并将音乐分成若干个片段.音乐的每个片段都是由 1 1 1 ...