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">
    <link href="https://fonts.font.im/css?family=Indie+Flower" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <section class="split">
        <div class="screen">
            <div class="content">
                <h2>西江月·世事一场大梦</h2>
                <h4>宋代：苏轼</h4>
                <p>世事一场大梦，人生几度秋凉？<br>夜来风叶已鸣廊。<br>看取眉头鬓上。<br>
                    酒贱常愁客少，月明多被云妨。<br>中秋谁与共孤光。<br>把盏凄然北望。
                </p>
            </div>

        </div>
        <div class="screen">
            <div class="content">
                <h2>蝶恋花·庭院深深深几许</h2>
                <h4>宋代：欧阳修</h4>
                <p>庭院深深深几许，杨柳堆烟，帘幕无重数。<br>玉勒雕鞍游冶处，楼高不见章台路。<br>
                        雨横风狂三月暮，门掩黄昏，无计留春住。<br>泪眼问花花不语，乱红飞过秋千去。
                </p>
            </div>

        </div>
        <div class="screen">
            <div class="content">
                <h2>浪淘沙令·帘外雨潺潺</h2>
                <h4>五代：李煜</h4>
                <p>帘外雨潺潺，春意阑珊，罗衾不耐五更寒。<br>梦里不知身是客，一晌贪欢。<br>
                    独自莫凭栏，无限江山，别时容易见时难。<br>流水落花春去也，天上人间。
                </p>
            </div>

        </div>
    </section>
</body>

</html>

CSS：

body{
    margin:;
    padding:;
    font-family: 'Indie Flower', cursive;
}
section{
    position: relative;
    height:100vh;
    display: flex;
    background:#000;
}
section .screen{
    position: relative;
    flex-grow:;
    display: flex;
    overflow: hidden;
    transition: 0.5s;
    opacity: .3;
}
section:hover .screen{
    opacity: .3;
}
section .screen:hover{
    flex-grow:;
    opacity:;
}
section .screen:nth-child(1){
    background: url(./img/1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}
section .screen:nth-child(2){
    background: url(./img/2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}
section .screen:nth-child(3){
    background: url(./img/3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}
section .screen .content{
    position: absolute;
    bottom:;
    right:;
    width:400px;
    height:auto;
    background:#fff;
    padding:40px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: 0.5s;
    text-align:justify;
}
section .screen:hover .content{
    transform: translateX(0);
    transition-delay: 0.5s;
}
section .screen .content h2{
    font-size:25px;
    color:#3c6382;
}
section .screen .content h4{
    font-size:20px;
    color:#3c6382;
}
section .screen .content p{
    color:#60a3bc;
}

效果图：

CSS效果：焦点图片的更多相关文章

  1. CSS效果：图片切换

    HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  2. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  3. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

  4. 分享11个纯css完成的图片浏览器

    图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分.实现图片画廊有很多种方法,今天要与大家分享的是11个使用纯 CSS 实现的图片画廊,它们代码少,效果炫,加载速度快,希望能对大家有所帮助. ...

  5. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  6. (8/24) 图片跳坑大战--css中的图片处理

    前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码.上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文 ...

  7. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  8. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

  9. CSS中背景图片的background-position中的left top到底是相对于谁的？

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

  10. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

随机推荐

  1. tomcat 中项目配置文件统一目录设置

    在tomcat 安装目录中 conf 下的  catalina.properties 文件中 有个  shared.loader= 配置为   shared.loader="${catali ...

  2. textarea跟随内容自动伸缩高度实现方案

    监听input事件,然后将textarea的style.height设置为最低高度(19px),进而获取到元素的scrollHeight,然后将scroolHeight设置为style.height

  3. load data语句实验报告

    1.创建和选择数据库 如果管理员在设置权限时为您创建数据库,则可以开始使用它.否则,您需要自己创建它: 创建数据库不会选择它来使用; 你必须明确地这样做.要创建menagerie当前数据库,请使用以下 ...

  4. Google Analytics电子商务篇(Universal版)

    Google Analytics是一款用于统计分析网站流量.浏览行为,可用于衡量用户与您网站的互动情况的全新方式.最近刚接触不久,发现其功能真的十分强大,记录下电子商务配置方法.(新手,老鸟勿喷) G ...

  5. 2n字符

    有2n字符挨个排成一排,前n个是'1',后n个是'0'.如 11110000(此时2n=8),现在交换字符的位置,使之按照 10101010 的模式排列.而且要使字符移动的次数最少,编程计算最少的移动 ...

  6. linux命令-diff对比文件工具

    diff 命令是 linux上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方.diff在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件.diff程序的 ...

  7. Hive中数据的导入与导出

    最近在做一个小任务,将一个CDH平台中Hive的部分数据同步到另一个平台中.毕竟我也刚开始工作,在正式开始做之前,首先进行了一段时间的练习,下面的内容就是练习时写的文档中的内容.如果哪里有错误或者疏漏 ...

  8. iframe的缺点

    *iframe会阻塞主页面的Onload事件: *搜索引擎的检索程序无法解读这种页面,不利于SEO; *iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载. 使用i ...

  9. kafka已生产消息查看

    在测试过程中有用到kafka,由于开发说我往kafka里面生产了消息,通知了对方要消费....看到这块一头雾水 kafka主要2个功能生产和消费 ##查询topic列表 ./kafka-topics. ...

  10. Linux安装TeamViewer

    1.下载teamview centos版本 官网只有rpm版本,附件中即为官网下载的teamview最新版本 (下载tar包方式,我这里打不开teamviewer的界面,所以这里不推荐) 官方下载地址 ...