Question

我正在尝试在悬停中发布转换，在顶部和底部进行转换，我正在使用此代码。

＆＃13;

.moade3 {
	margin: 100px;
	width: 200px;
	height: 300px;
}
.fo2 {
	background: #000;
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 200px;
	transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
}
.block:hover > .fo2 {
	height: 40px;
	opacity: .3;
}
.block {
	background: #B8B8B8;
	height: 300px;
	width: 200px;
}
.t7t {
	background: #000000;
	height: 1px;
	position: absolute;
	width: 200px;
	opacity: 0;
	transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
	transform: rotatex(180deg);
	transform-origin: top;
}
.block:hover > .t7t {
	height: 100px;
	opacity: .3;
}
.shame {
	transform: rotatex(180deg);
	opacity: 1;
	font-weight: bold;
}
	.link{
		text-decoration: none;
		color:#FFFFFF;
		font-weight: bold;
		}
	.link:hover{
				text-decoration: none;
				color:#FFFFFF;
				opacity: 1;
				font-weight: bold;
	}

＆＃13;

<div class="moade3"> <a class="link" href="#">
  <div class="block">
    <div class="fo2 text-center"> Categories </div>
    <img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg">
    <div class="t7t text-center">
      <p class="shame">Name of post and Discraption Area</p>
      <h5 class="shame"> Name of post  </h5>
    </div>
  </div>
  </a> </div>

＆＃13;

这里的问题是我无法将<p>标签的不透明度设为1， div的不透明度影响该段落标签需要将其置于完全不透明度（.shame或p＆amp; h5）它也必须在div里面。

Answer 1

如果使用background：rgba（0,0,0,0.5）来设置背景颜色而不是不透明度，然后将其设置回0 alpha值，则可以实现此目的。这也保留了流畅的动画。

＆＃13;

.moade3 {
	margin: 100px;
	width: 200px;
	height: 300px;
}
.fo2 {
	background: #000;
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 200px;
	transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
}
.block:hover > .fo2 {
	height: 40px;
	opacity: .3;
}
.block {
	background: #B8B8B8;
	height: 300px;
	width: 200px;
}
.t7t {
	height: 1px;
	position: absolute;
	width: 200px;
	opacity: 1;
	transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
	transform: rotatex(180deg);
	transform-origin: top;
}
.block:hover > .t7t {
	height: 100px;
    background:rgba(0, 0, 0, 0.51);
}
.block:hover .shame{
   opacity:1;
 }
.shame {
	transform: rotatex(180deg);
	opacity: 0;
	font-weight: bold;
}
	.link{
		text-decoration: none;
		color:#FFFFFF;
		font-weight: bold;
		}
	.link:hover{
				text-decoration: none;
				color:#FFFFFF;
				opacity: 1;
				font-weight: bold;
	}

＆＃13;

<div class="moade3"> <a class="link" href="#">
  <div class="block">
    <div class="fo2 text-center"> Categories </div>
    <img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg">
    <div class="t7t text-center">
      <p class="shame">Name of post and Discraption Area</p>
      <h5 class="shame"> Name of post  </h5>
    </div>
  </div>
  </a> </div>

＆＃13;

Answer 2

不幸的是，任何具有不透明度的元素的子元素也会受到影响。

为什么不在背景上使用RGBA，而不是这样：

＆＃13;

.moade3 {
	margin: 100px;
	width: 200px;
	height: 300px;
}
.fo2 {
	background: rgba(0, 0, 0, 0.3);;
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 200px;
	transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
}
.block:hover > .fo2 {
	height: 40px;
	opacity: 1;
}
.block {
	background: #B8B8B8;
	height: 300px;
	width: 200px;
}
.t7t {
	background: rgba(0, 0, 0, 0.3);
  
	height: 1px;
	position: absolute;
	width: 200px;
	opacity: 0;
	transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
	transform: rotatex(180deg);
	transform-origin: top;
}
.block:hover > .t7t {
	height: 100px;
	opacity: 1;
 
}
.shame {
	transform: rotatex(180deg);
	opacity: 1;
	font-weight: bold;
}
	.link{
		text-decoration: none;
		color:#FFFFFF;
		font-weight: bold;
		}
	.link:hover{
				text-decoration: none;
				color:#FFFFFF;
				opacity: 1;
				font-weight: bold;
	}

＆＃13;

<div class="moade3"> <a class="link" href="#">
  <div class="block">
    <div class="fo2 text-center"> Categories </div>
    <img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg">
    <div class="t7t text-center">
      <p class="shame">Name of post and Discraption Area</p>
      <h5 class="shame"> Name of post  </h5>
    </div>
  </div>
  </a> </div>

＆＃13;

div中的p标签的不透明度在帖子中悬停

2 个答案: