CSS效果:焦点图片
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效果:焦点图片的更多相关文章
- CSS效果:图片切换
HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
- CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案
最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...
- 分享11个纯css完成的图片浏览器
图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分.实现图片画廊有很多种方法,今天要与大家分享的是11个使用纯 CSS 实现的图片画廊,它们代码少,效果炫,加载速度快,希望能对大家有所帮助. ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- (8/24) 图片跳坑大战--css中的图片处理
前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码.上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文 ...
- 如何使用css来让图片居中不变形 微信小程序和web端适用
图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...
- webpack快速入门——CSS中的图片处理
1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...
- CSS中背景图片的background-position中的left top到底是相对于谁的?
在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
随机推荐
- 配置ubuntu
2. 安装配置软件 创建服务器成功后,点击服务器列表页的Ubuntu轻量应用服务器卡片的远程连接按钮 连接成功后开始安装软件. VNC的安装与配置 安装之前先输入 apt-get update 获取最 ...
- hbase的api操作之过滤器
Comparison Filter: 对比过滤器: 1.RowFilter select * from ns1:t1 where rowkey <= row100 ...
- 【转】所有版本chrome、chromedriver、firefox下载链接
所有版本chrome.chromedriver.firefox下载链接 1. 所有版本chrome下载 是不是很难找到老版本的chrome?博主收集了几个下载chrome老版本的网站,其中哪个下载的是 ...
- js的call和apply区别
call和apply都是改变了this的指针. obj.call(newObj, arg1, arg2, ...); obj.apply(newObj, [arg1, arg2, ...]); 上面的 ...
- python3 LDA主题模型以及TFIDF实现
import codecs #主题模型 from gensim import corpora from gensim.models import LdaModel from gensim import ...
- 小T牛 绿色版 18.08.0100
百度网盘 链接:https://pan.baidu.com/s/1g2PIMBR8YAdz5skH5ogFhw 密码:3o4k 小T牛 小T牛 绿色版 18.08.0100 意见反馈:qq(邮箱):6 ...
- springcloud-zuul路由网关
路由网关(zuul) 在微服务架构中,需要多个基础的服务治理组件,包括服务注册与发现.服务消费.负载均衡.断路器.智能 路由.配置管理等,由这个基础组件相互协作,共同组建了一个简单的微服务系统.一个简 ...
- js 数据处理
开发过程中经常遇到 1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12} ...
- react-redux-action
Action 是把数据从应用(view等)传到 store 的有效载荷,store.dispatch() 将 action 传到 store. //尽量减少在 action 中传递的数据//actio ...
- 实训任务03: 使用Eclipse创建MapReduce工程
实训任务03: 使用Eclipse创建MapReduce工程 实训1: win7中使用Eclipse创建MapReduce工程 实训2:Centos 6.8系统中安装Eclipse 一.下载Eclip ...