前端特效-HTML+CSS - 图片悬浮效果

实现的效果

html部分

<!DOCTYPE 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"><title>图片悬浮效果</title><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="image middle"><img src="http://img2.imgtn.bdimg.com/it/u=1688631197,3554659657&fm=26&gp=0.jpg" alt=""><div class="image-content"><h1>Image Title</h1><div class="icons"><a href="javascript:;" class="icon fas fa-heart"></a><a href="javascript:;" class="icon fas fa-comment"></a><a href="javascript:;" class="icon fas fa-share"></a></div></div></div>
</body>
</html>

css部分

* {padding: 0;margin: 0;font-family: "montserrat";
}body {background: #ddd;
}.middle {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
}.image {width: 440px;height: 300px;overflow: hidden;cursor: pointer;
}.image-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 40px;box-sizing: border-box;
}.image-content h1 {color: #fff;text-transform: uppercase;transform: translateY(20px);transition: 0.4s;
}.image:hover .image-content h1 {transform: translateY(0px);
}.icons {position: absolute;right: 40px;bottom: 40px;
}.icon {text-decoration: none;color: #333;font-size: 22px;margin: 0 8px;transform: translateY(80px);
}.image:hover .icon {transform: translateY(0px);
}.icon:nth-of-type(1){transition: transform 0.4s 0.05s,color 0.4s
}.icon:nth-of-type(2){transition: transform 0.4s 0.1s,color 0.4s
}.icon:nth-of-type(3){transition: transform 0.4s 0.15s,color 0.4s
}.icon:hover {color: #0984e3;
}.image-content::before {content:"";position: absolute;left: 0;bottom: 0;background: rgba(255,255,255,.7);width: 100%;height: 0px;clip-path: polygon(0 100%,100% 0,100% 100%);transition: 0.5s
}.image-content:hover::before {height: 140px;
}

前端特效-HTML+CSS - 图片悬浮效果相关推荐

html图片纵向变,【转】15个CSS图片悬浮效果
先睹为快在开始之前,先欣赏一下所有将要在本文中创造的悬浮效果,点击图片查看. 设置在开始创造独特的演示之前,需要先做一些基本的设置.下面的CSS用来定义所有例子的基本显示. 大部分是一些基本的设置 ...
css实现图片悬浮效果
css实现图片悬浮效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
html 悬浮阴影,css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下: 要实现的效果图: 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box ...
html网页切换效果，css图片切换效果
<title>html网页切换效果,css图片切换效果</title><link rel="stylesheet" href="./fami ...
相对定位-----图片悬浮效果
相对定位是相对于自己初始位置进行调整位置,其仍然占有之前位置,即position:relative;加上top,left的移动值. 下面是一个图片鼠标触动悬浮效果小例子 //html //css
【前端】纯CSS实现探照灯效果
效果如下: 代码实现: 以下代码可以复制粘贴,在任何浏览器均可运行. <!DOCTYPE html> <html lang="en"><head> ...
CSS图片重叠效果~秒懂
利用CSS实现图片重叠,当鼠标悬浮到第一张图片的时候,第二张图片会显示出来. 效果如下: 源码: <!DOCTYPE html> <html lang="en"& ...
前端特效:Javascript,css animation,GIF,Lottie
特效在9102 前端营销广告或者H5或者纯粹广告图的方式司空见惯,但总有新的替代方式.虽然特效越来越复杂,但特效制作的制作过程却越来越简便.最近做了个项目使用到了最新的实现技术,以下会对比相应的技术实 ...
html css分页特效,js css自定义分页效果
网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配mvc和数据库效果图片先来css(样式不喜欢的话可以不用这个) .pagelist {padding:10px 0; t ...
[CSS]图片展示效果
本例对于完全支持:hover伪类的浏览器来说,只需要CSS即可,但是同以前做的一些效果一样,还是需要JS来应付史前怪兽IE 6. 关于这个js文件,请参阅:<JS解决IE 6不支持:hover伪 ...

前端特效-HTML+CSS - 图片悬浮效果

前端特效-HTML+CSS - 图片悬浮效果相关推荐

最新文章

热门文章