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. CHM文件命令转换成html

    在Windows下chm转换为html的超简单方法(反编译CHM文件的方法) 通过调用Windows命令,将chm 文件转换为html 文件. 方法: 命令行(cmd),输入hh -decompile ...

  2. CentOS 中安装和卸载 Emacs

    日志更新记录: [1] 增加 CentOS7.2 (内核版本:3.10.0-514.16.1.el7.x86_64)下Emacs25.2 的安装过程,它与本文的步骤完全一样. Emacs 版本:htt ...

  3. 安装pyspider遇到的坑

    pyspider是国人写的一款开源爬虫框架,个人觉得这个框架用起来很方便,至于如何方便可以继续看下去. 作者博客:http://blog.binux.me/ 安装pyspider安装pyspider: ...

  4. 在 ubuntu18.04 中搭建 Django 开发环境

    在Ubuntu 18.04 安装 python3.pip3.pycharm,搭建 Django 开发环境. 1.安装 python3 pip3 sudo apt-get install python3 ...

  5. c语言中，在结构体中如何将void *转存为具体需要的数据类型

    1. 只需要将该void *类型成员,强制转换为具体的数据类型指针即可.需要注意的是,该强制转换是有风险的,转换时,必须确定void*指向内存实际数据为目标结构体格式,否则可能会出现内存越界访问,从而 ...

  6. python学习小总结（列表、元组、字典、集合、字符串）

    ---恢复内容开始--- 一.列表(list) 1.添加 append():追加,在列表末尾添加元素. 列表名.append(添加的元素) extend():扩展,在列表末尾添加元素. 列表名.ext ...

  7. C#如何在生成文件夹或者文件时候自动重命名

    如果你在一个文件夹里面, 连续添加文件夹或者文件(不改名字), 那么系统会自动加上(1),(2),(3)... 这个效果我在网上搜不到, 自己写一下也不太难. 文件夹的:(不断点击按钮就有效果) pr ...

  8. 7ci

  9. Oracle 11g OGG 修改 trail 文件大小

    OGG 修改 trail 文件大小 2018-06-11 15:14 380 0 原创 GoldenGate 本文链接:https://www.cndba.cn/leo1990/article/285 ...

  10. 软工作业（JAVA）

    github传送门:https://github.com/hhg52516/WC.git 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程序 ...