时间戳

首页 > 解决方案 > 如何在标题上方制作段落层

html - 如何在标题上方制作段落层

问题描述

当我们将鼠标悬停在图像上方的标题上时，我正在制作段落数据，该段落将从右侧渐变。这里的代码请帮我写。数据应与右侧对齐，而不是覆盖整个页面此代码

  .align-center{
    text-align: center;
    display: inline-block;
    margin:0 auto;
    margin-bottom: 50px;
}
.image-cover-3{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 250px;
    line-height: 250px;
    background-size: cover;
  text-align: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(100,167,87,.48)), url("https://i.ibb.co/HK8v8W3/buiding.jpg");
}

.head-size-2{
    font-size: 40px;
}

.rearrange-img{
    display: inline-flex;
    vertical-align: middle;
  line-height: normal;     
    position: relative;
    color: aliceblue;
}

.image-cover-3:hover .head-size-2{
    opacity: 0;
    -webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    transition: opacity 300ms;
}

.image-cover-3 .head-size-3{
    opacity: 0;
    font-size: 20px;
    display: flex;
    vertical-align: middle;     
    color: aliceblue;
    top: -150px;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    background-image: linear-gradient(rgba(1, 0, 0, 0.4),rgba(100,167,87,.48));
    height: 100%;
    width: 1200px;
}

.image-cover-3:hover .head-size-3{
    opacity: 0.8;
}

标签： htmlcssflexbox

解决方案

欢迎来到 SO！我想这就是你想要的

.align-center{
	text-align: center;
	display: inline-block;
	margin:0 auto;
	margin-bottom: 50px;
}
.image-cover-3{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 250px;
	line-height: 250px;
	background-size: cover;
  text-align: center;
	background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(100,167,87,.48)), url("https://i.ibb.co/HK8v8W3/buiding.jpg");
position: relative;
}

.head-size-2{
	font-size: 40px;
}

.rearrange-img{
	display: inline-flex;
	vertical-align: middle;
  line-height: normal;     
	position: relative;
	color: aliceblue;
}

.image-cover-3:hover .head-size-2{
	opacity: 0;
	-webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    transition: opacity 300ms;
}

.image-cover-3 .head-size-3{
	opacity: 0;
	font-size: 20px;
	display: flex;
	vertical-align: middle;     
	color: aliceblue;
	top: 0px;
	-webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
	background-image: linear-gradient(rgba(1, 0, 0, 0.4),rgba(100,167,87,.48));
	height: 100%;
    width: 100%;
    POSITION: ABSOLUTE;
    LEFT: 0;
    RIGHT: 0;
    align-items: center;
}

.image-cover-3:hover .head-size-3{
	opacity: 0.8;
}
<section><div class="image-cover-3">
<h2  class="rearrange-img head-size-2">About the International Confrence on Industry 4.0 & Circular Economy</h2>
	<div class="align-center rearrange-img head-size-3">
	 The conference widens the scope of bringing together innovators, researchers and industries under common goal – creating, evaluating, implementing and benefiting from innovations. It will thus support innovative projects in Mechanical engineering and bring benefits to all involved participants
    </div>
	</div>
	</section>

推荐阅读