HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="imgBox">
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
    </div>
</body>
</html>

CSS:

body{
    margin:;
    padding:;
    display: flex;
    justify-content:center;
    align-items: center;
    min-height:100vh;
}
.imgBox{
    position: relative;
    height: 500px;
    width:500px;
    overflow: hidden;
}
.imgBox img{
    position: absolute;
    top:;
    left:;
    width:100%;
    height:100%;
    background-size: cover;
    transition: 0.5s;
}

.imgBox:hover img:nth-child(2){
    transform: translateX(-50%) scaleX(2);
    opacity:;
    filter: blur(10px);
}
.imgBox img:nth-child(1){
    transform: translateX(50%) scaleX(2);
    opacity:;
    filter: blur(10px);
}
.imgBox:hover img:nth-child(1){
    transform: translateX(0) scaleX(1);
    opacity:;
    filter: blur(0px);
}

效果图:

CSS效果：图片切换的更多相关文章

  1. css实现图片切换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  2. jQuery带缩略图轮播效果图片切换带缩略图

    以上为效果图 HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  3. Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

  4. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. JS图片切换效果

    源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  8. CSS学习------之简单图片切换

    最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...

  9. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  10. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

随机推荐

  1. 通过Azure File Service搭建基于iscsi的共享盘

    在Azure上目前已经有基于Samba协议的共享存储了. 但目前在Azure上,还不能把Disk作为共享盘.而在实际的应用部署中,共享盘是做集群的重要组件之一.比如仲裁盘.Shared Disk等. ...

  2. BA 新web化 问题汇总

    1. 3D堆栈图在winform端无法显示,但在web端可以正常显示,说明与浏览器版本有关,在 IE 中设置文档模式为 IE8 即报错,IE9 却正常显示,可在 <head>节点下添加如下 ...

  3. C#实现有向无环图(DAG)拓扑排序

    对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若边(u,v)∈E(G),则u在线性序列中出现在 ...

  4. Java 对密码MD5

    MD5,即"Message-Digest Algorithm 5(信息-摘要算法)": MD5将任意长度的“字节串”变换成一个128bit的大整数,并且它是一个不可逆的字符串变换算 ...

  5. ios下编译opencv

    如果想要在ios下编译opencv 需要安装Cmake 这里通过homebrew 来安装cmake ios下打开终端然后先安装 homebrew :(mac 下自带ruby) ruby -e &quo ...

  6. Alert---点击拍照弹出对话框

    /** * 照片对话框 *AlertDialog */ private void PhotoDialog() { AlertDialog.Builder builder = new Builder(m ...

  7. Python01 python入门介绍

    1 python简介 1.1 为什么学python python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van ...

  8. SQl Server Tsql基本编程 ，循环语句 ，存储过程

    一些比较重要但是不一定经常用的 句子 Tsql定义变量 declare @a int :  定义的变量前面必须用@,数据类型是SQL里的数据类型,执行的时候要把需要的有关联的代码一起执行,单独执行一条 ...

  9. ruby 类方法、实例方法、类变量

    ###################### #类变量 ###################### class Cloud @@count=0 def initialize(user,passwor ...

  10. 36-图像有用区(dfs, bfs)

    http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=92 图像有用区域 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   ...