web前端十种图片的hover效果（粗糙）

最新推荐文章于 2024-05-16 09:53:34 发布

OrdnAry

最新推荐文章于 2024-05-16 09:53:34 发布

阅读量2.5k

点赞数 1

分类专栏：学习文章标签： css

本文链接：https://blog.csdn.net/OrdnAry/article/details/107431631

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>十种图片hover效果</title>
 </head>
 <style>
/*可视化窗口*/
.d{
	width:400px;
	height:300px;
	margin:auto;
	overflow:hidden;/*溢出隐藏*/
	position:relative;/*父元素相对定位*/
}
/*蒙版效果*/
.d>div{
	width:100%;
	height:100%;
	text-align:center;/*字体水平居中*/
	line-height:300px;/*字体垂直居中 */
	position:absolute;/*子元素绝对定位*/
	transition:all 300ms linear;/*过渡属性*/
}
.img{
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:absolute;/*图片绝对定位*/	
	transition:all 300ms linear;/*过渡属性*/
}
/***************图片中hover效果第一种***************/
/*鼠标悬停1照片位置*/
.d1:hover>img{
	top:-100%;
}
/*蒙版效果*/
.d1>div{
	background-color:rgb(0,255,0);
	opacity:0;/*透明度完全透明*/
	left:0; /*调整位置*/
	top:-100%;	/*调整位置*/
}
/*鼠标悬停蒙版透明*/
.d:hover>div{
	top:0;
	opacity:1;/*透明度完全不透明*/
}
/***************图片中hover效果第二种***************/
/*鼠标悬停2照片位置*/
.d2:hover>img{
	 transform:perspective(600px) rotateY(-35deg);
	 }
/*蒙版效果*/
.d2>div{
	background-color:rgb(102,0,204);
	opacity:0;/*透明度完全透明*/
}
/*鼠标悬停蒙版透明*/
.d2:hover>div{
	top:0;
	opacity:0.7;/*透明度不完全透明*/
	transform:perspective(600px) rotateY(-35deg);
}
/***************图片中hover效果第三种***************/
/*鼠标悬停3照片位置*/
.d3:hover>img{
	 transform:perspective(600px) rotateX(35deg);
	 }
/*蒙版效果*/
.d3>div{
	background-color:rgb(255,51,0);
	opacity:0;/*透明度完全透明*/
}
/*鼠标悬停蒙版透明*/
.d3:hover>div{
	top:0;
	opacity:0.7;/*透明度完全不透明*/
	transform:perspective(600px) rotateX(35deg);
	transform-origin:bottom top;
	
}
/***************图片中hover效果第四种***************/
/*鼠标悬停4照片位置*/
.d4:hover>img{
	 transform:scale(1.5);
	 }
/*蒙版效果*/
.d4>div{
	width:90%;
	height:90%;
	left:-105%;
	top:5%;
	background-color:#ffcc00;
}
/*鼠标悬停蒙版透明*/
.d4:hover>div{
	left:5%;
	top:5%;
}
/***************图片中hover效果第五种***************/
/*鼠标悬停5照片位置*/
.d5:hover>img{
	 transform:scale(1.5);
	 }
/*蒙版效果*/
.d5>div{
	background-color:rgb(0,153,255);
	opacity:0;/*透明度完全透明*/
	transform:perspective(600px) rotateX(90deg);
	transition:all 500ms linear;/*过渡属性*/
}
/*鼠标悬停蒙版透明*/
.d5:hover>div{
	top:0;
	opacity:0.8;/*透明度不完全透明*/
	transform:perspective(600px) rotateX(0deg);
}
/***************图片中hover效果第六种***************/
/*鼠标悬停6照片位置*/
.d6:hover>img{
	 transform:scale(1.5);
	 }
/*蒙版效果*/
.d6>div{	
	opacity:0;
	background-color:rgb(0,0,153);
}
/*鼠标悬停蒙版透明*/
.d6:hover>div{
	width:95%;
	height:95%;
	left:2.5%;
	top:2.5%;
	opacity:0.8;
}
/***************图片中hover效果第七种***************/
/*鼠标悬停7照片位置*/
.d7:hover>img{
	 transform:perspective(600px) rotateY(35deg);
	 }
/*蒙版效果*/
.d7>div{
	background-color:rgb(153,0,153);
	opacity:0;/*透明度完全透明*/
}
/*鼠标悬停蒙版透明*/
.d7:hover>div{
	top:0;
	opacity:0.7;/*透明度完全不透明*/
	transform:perspective(600px) rotateY(35deg);
}
/***************图片中hover效果第八种***************/
/*鼠标悬停8照片位置*/
.d8:hover>img{
	 transform:scale(1.5);
	 }
/*蒙版效果*/
.d8>div{
	background-color:rgb(255, 51, 51);
	opacity:0;/*透明度完全透明*/
	transform:rotateY(90deg);
	transition:all 400ms linear;/*过渡属性*/
}
/*鼠标悬停蒙版透明*/
.d8:hover>div{s
	top:0;
	opacity:0.8;/*透明度不完全透明*/
	transform:rotateY(0deg);
}
/***************图片中hover效果第九种***************/
/*鼠标悬停9照片位置*/
.d9:hover>img{
	 transform:scale(1.5);
	 }
/*蒙版效果*/
.d9>div{
	background-color:rgb(0, 216, 0);
	opacity:0;/*透明度完全透明*/
}
/*鼠标悬停蒙版透明*/
.d9:hover>div{s
	top:0;
	opacity:0.4;/*透明度不完全透明*/
}
/***************图片中hover效果第十种***************/
/*鼠标悬停10照片位置*/
.d10:hover>img{
	 transform:scale(1.5);
	 }
/*蒙版效果*/
.d10>div{
	background-color:rgb(255, 51, 153);
	opacity:0;/*透明度完全透明*/
	transform: perspective(600px) rotateY(90deg);
	transform-origin:left;
	transition:all 400ms linear;/*过渡属性*/
}
/*鼠标悬停蒙版透明*/
.d10:hover>div{
	top:0;
	opacity:0.9;/*透明度不完全透明*/
	transform:rotateY(0deg);
}
 </style>
 <body>
  <!-- 图片中hover效果第一种 -->
  <h1 align="center">Hover Effect 1</h1>
  <div class="d d1">
	<img class="img" src="img/1.jpg">
	<div>绿色蒙版</div>	
  </div><br>
  <!-- 图片中hover效果第二种 -->
  <h1 align="center">Hover Effect 2</h1>
  <div class="d d2" style="overflow:visible">
	<img class="img" src="img/2.jpg">
	<div>紫色蒙版</div>	
  </div><br>
   <!-- 图片中hover效果第三种 -->
   <h1 align="center">Hover Effect 3</h1>
  <div class="d d3" style="overflow:visible">
	<img class="img" src="img/3.jpg">
	<div>红色蒙版</div>	
  </div><br>
  <!-- 图片中hover效果第四种 -->
  <h1 align="center">Hover Effect 4</h1>
  <div class="d d4">
	<img class="img" src="img/4.jpg">
	<div>黄色蒙版</div>	
  </div><br>
  <!-- 图片中hover效果第五种 -->
  <h1 align="center">Hover Effect 5</h1>
  <div class="d d5">
	<img class="img" src="img/5.jpg">
	<div>蓝色蒙版</div>	
  </div><br>
  <!-- 图片中hover效果第六种 -->
  <h1 align="center">Hover Effect 6</h1>
  <div class="d d6">
	<img class="img" src="img/6.jpg">
	<div>紫色蒙版</div>	
  </div><br>
  <!-- 图片中hover效果第七种 -->
  <h1 align="center">Hover Effect 7</h1>
  <div class="d d7" style="overflow:visible">
	<img class="img" src="img/1.jpg">
	<div>紫色蒙版</div>	
  </div><br>
  <!-- 图片中hover效果第八种 -->
  <h1 align="center">Hover Effect 8</h1>
   <div class="d d8">
	<img class="img" src="img/2.jpg">
	<div>红色蒙版</div>	
  </div><br>
  <!-- 图片中hover效果第九种 -->
  <h1 align="center">Hover Effect 9</h1>
   <div class="d d9">
	<img class="img" src="img/3.jpg">
	<div>绿色蒙版</div>	
  </div><br>
  <!-- 图片中hover效果第十种 -->
  <h1 align="center">Hover Effect 10</h1>
  <div class="d d10">
	<img class="img" src="img/4.jpg">
	<div>粉色蒙版</div>	
  </div><br>
 </body>
</html>

在这里插入图片描述

OrdnAry

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
web前端十种图片的hover效果（粗糙）

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title
复制链接

扫一扫