css图片悬停添加蒙版和文字

效果图：

效果图（hover悬停）

代码如下：

html：

<div class="box"><img src="https://images.pexels.com/photos/19872/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="box_img"/><div class="inside"><span class="word">长城</span><span >长城长城长城长城长城长城</span></div>
</div>

css：

    .box{position: relative;width: 860px;height: 573px;overflow: hidden;}.box_img{width: 860px;height: 573px;position: absolute;transition: all .5s;}.box:hover .box_img{transform: scale(1.05);transition: all .5s;}.inside{overflow: hidden;width: 860px;height: 573px;position: absolute;background: rgb(85, 85, 85,0);transition: all 0.5s;letter-spacing:1px}.inside:hover {background: rgb(85, 85, 85,0.4);transition: all 0.5s;}.inside span{margin-left: 10px;color: #ffffff;font-size: 19px;font-weight: bold;display: block;}.word{margin-top: 540px;transition: all 0.5s;margin-bottom: 20px;}.box:hover .word{margin-top: 490px;transition: all 0.5s;}

css图片悬停添加蒙版和文字相关推荐

html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
php背景图添加字,怎样给视频后面加背景图视频加背景图片并添加一行广告文字...
有不少广告小视频中,视频画面是一张海报背景图片,图片上显示一个小视频播放,并且在画面上还有显示一行广告字幕.这样的宣传视频制作其实蛮简单的,怎样给视频后面加背景图片的方法倒是挺多,要给视频加背景图片的 ...
Android 自定义View消除锯齿实现图片旋转,添加边框及文字说明
先看看图片的效果,左边是原图,右边是旋转之后的图: 之所以把这个写出来是因为在一个项目中需要用到这样的效果,我试过用FrameLayout布局如上的画面,然后旋转FrameLayout,随之而来也 ...
ps中为什么在图片上面添加不了文字
我们在使用PS对某些图片进行处理时,往往会添加一些文字:但有时因图片格式问题,导致添加文字是一个小黑点,无法看清,下面就为大家讲解一下具体的处理方法. 工具/原料 Photoshop CS5.图片方 ...
css图片悬停边框,CSS悬停边框使内联元素稍微调整
ITMISS 您可以使用框阴影而不是边框来实现此类功能.这是有效的,因为你的阴影不会"占用DOM中的大小",因此不会影响定位,不像边框那样.尝试使用像这样的声明box-shadow ...
图片如何加边框和文字？试试下面这三个方法吧
前几天和朋友出去玩的时候,由于好久没见,拍摄了许多的大合照.在准备将照片发朋友圈的时候,我们希望可以给图片添加上文字和边框,让照片看起来更加美观.于是我就花了点时间上网搜索了几个怎么给图片加上边框和文 ...
图片上添加贴纸怎么做？这几种方法很简单
在图片上添加贴纸是一种非常实用的图片编辑技巧,通过添加贴纸,图片可以变得更加生动有趣,吸引人们的眼球.贴纸可以是各种形状.颜色和大小,从而丰富图片的视觉效果.例如,在一张风景照片中添加一只卡通动物的图 ...
html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图思路:div相对定位. 图片默认定位, 文字绝对定位参考代码 html> /*div1下面包含着1个图片和1段文字*/ ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
NC6自助开发文件存放路径及一些总结以及修改自助登录界面的样式、图片、添加文字提示等文件
NC6自助开发文件存放路径:\nchome\hotwebs\portal\sync NC6自助开发总结:https://download.csdn.net/download/u010741112/24 ...

css图片悬停添加蒙版和文字

css图片悬停添加蒙版和文字相关推荐

最新文章

热门文章