css 为Divi添加一个带有酷炫悬停效果的全宽图像网格。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 为Divi添加一个带有酷炫悬停效果的全宽图像网格。相关的知识,希望对你有一定的参考价值。

/* Animated Overlay */
.image-overlay-wrapper {
	height:500px; 
}

.image-overlay {
	background-color:rgba(0,0,0, 0.7); 
	position:absolute; 
	height:100%; 
	width:100%; 
	opacity: 0; 
	transition:opacity 1s; 
}

.image-overlay:hover,
.image-overlay-wrapper:hover .image-overlay {
  opacity: 1;
}

.image-overlay::before {
	content:""; 
	border-top:1px solid #fff; 
	border-bottom:1px solid #fff; 
	position:absolute; 
	top:30px; 
	right:30px; 
	bottom:30px; 
	left:30px; 
	transform:scale(0,1); 
	transition:transform .8s; 
}

.image-overlay-wrapper:hover .image-overlay::before {
	transform:scale(1,1); 
}

.image-overlay::after {
	content:""; 
	border-left:1px solid #fff; 
	border-right:1px solid #fff; 
	position:absolute; 
	top:30px; 
	right:30px; 
	bottom:30px; 
	left:30px; 
	transform:scale(1,0); 
	transition:transform .8s; 
}

.image-overlay-wrapper:hover .image-overlay::after {
	transform:scale(1,1); 
}

.image-overlay-text {
	opacity: 0; 
	z-index: 1; 
	position:absolute; 
}

.image-overlay-wrapper h1 {
  transform: translateY(25%);
  transition: .6s;
}

.image-overlay-wrapper:hover h1 {
  transform: translateY(0);
  transition: .7s;
}

.image-overlay-wrapper .et_pb_button {
	opacity: 0;
}
.image-overlay-wrapper:hover .image-overlay-text, 
.image-overlay-wrapper:hover .et_pb_button {
	opacity: 1; 
}

以上是关于css 为Divi添加一个带有酷炫悬停效果的全宽图像网格。的主要内容,如果未能解决你的问题,请参考以下文章

css 为Divi添加一个带有酷炫悬停效果的全宽图像网格。

带有内容 div、wordpress 的 css 全宽背景

css 将幻灯片文本定位在全宽Divi滑块上

固定高度的全宽图像

带有jquery mobile的全宽水平按钮?

如何在 swift 中设置 UIScrollView 内的全宽图像