<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="js/zoomit.js" async></script>
<title>WebDev Profile</title>
<style >
body {
background-color: lightsalmon;
margin: 25px;}
div.polaroid {
position: absolute;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
margin-right: 25px;
width: 37.05%;
}
.polaroid:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.overlay {
position: relative;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: auto;
height: 0;
transition: .5s ease;
}
div.container {
text-align: center;
padding: 10px 20px;
width: auto;
}
details {
position: relative;
font-size: 1.50em;
font: "Times New Roman";
font-style: italic;
}
.image {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
background: black;
display: block;
}
img:hover {
opacity: 0.8;
-webkit-filter: blur(15px); /* Safari */
filter: blur(15px);
}
h2 {
color: white;
}
</style>
</head>
<body>
<h2>Hilary Duff</h2>
<div class="polaroid">
<img src="hilary_duff_high.jfif" alt="Dushyant Kaushik" class ="image">
<div class="overlay">
<div class="text">Hilary Duff, Adult</div>
</div>
<div class="container">
<p>Hilary Duff, Adult</p>
</div>
</div>
<!-- the other half -->
<p class="details">INTJ (Introversion, Intuition, Thinking, Judgment) is an abbreviation used in the publications of the Myers–Briggs Type Indicator (MBTI) to refer to one of the 16 psychological types.[1]
According to Myers–Briggs the INTJ represents "The Mastermind". INTJs are one of the rarest of the 16 psychological types and account for approximately 2%[2] of the population.[3] Women of this personality type are especially rare, forming just 0.8% of the population.
The MBTI assessment was developed from the work of prominent psychiatrist Carl G. Jung in his book Psychological Types. Jung proposed a psychological typology based on the theories of cognitive functions that he developed through his clinical observations.
From Jung's work, others developed psychological typologies. Jungian personality assessments include the MBTI instrument, developed by Isabel Briggs Myers and Katharine Cook Briggs, and the Keirsey Temperament Sorter, developed by David Keirsey. Keirsey referred to INTJs as Masterminds,[4] one of the four types belonging to the temperament he called the Rationals.[5]
</p>
</body>
</html>
有一幅图像，我想将段落标签中的文字换行。当我将鼠标指针移到图像上时，滑动叠加也不会出现。无法弄清楚我做错了什么。请大家帮助我解决这个问题。
这是我的页面外观的另一幅图像。 Page screenshot
答案 0 :(得分：1)
不确定这是否可以解决问题，但是据我了解，您的文字没有与图像重叠。这是因为您的详细信息类没有“。”在它前面。应该将其定义为.details，而不是CSS中的详细信息。
.details {
position: relative;
font-size: 1.50em;
font: "Times New Roman";
font-style: italic;
}
答案 1 :(得分：0)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="js/zoomit.js" async></script>
<title>WebDev Profile</title>
<style >
body {
background-color: lightsalmon;
margin: 25px;}
.polaroid {
position: relative;
float: left;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
margin-right: 25px;
width: 37.05%;
}
.polaroid:hover .overlay {
max-height: 100%;
}
.polaroid:hover .text {
display: block;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
display: none;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.overlay {
position: absolute;
overflow: hidden;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 0;
width: 100%;
background-color: #008CBA;
z-index: 999;
}
.overlay-pseudo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 100%;
width: 100%;
z-index: 999;
}
div.container {
text-align: center;
padding: 10px 20px;
width: auto;
}
.details {
position: relative;
font-size: 1.50em;
font: "Times New Roman";
font-style: italic;
}
.image {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
background: black;
display: block;
}
h2 {
color: white;
}
</style>
</head>
<body>
<h2>Hilary Duff</h2>
<div class="polaroid">
<img src="hilary_duff_high.jpg" alt="Dushyant Kaushik" class ="image">
<div class="overlay-pseudo">
</div>
<div class="overlay">
<div class="text">Hilary Duff, Adult</div>
</div>
<div class="container">
<p>Hilary Duff, Adult</p>
</div>
</div>
<!-- the other half -->
<p class="details">INTJ (Introversion, Intuition, Thinking, Judgment) is an abbreviation used in the publications of the Myers–Briggs Type Indicator (MBTI) to refer to one of the 16 psychological types.[1]
According to Myers–Briggs the INTJ represents "The Mastermind". INTJs are one of the rarest of the 16 psychological types and account for approximately 2%[2] of the population.[3] Women of this personality type are especially rare, forming just 0.8% of the population.
The MBTI assessment was developed from the work of prominent psychiatrist Carl G. Jung in his book Psychological Types. Jung proposed a psychological typology based on the theories of cognitive functions that he developed through his clinical observations.
From Jung's work, others developed psychological typologies. Jungian personality assessments include the MBTI instrument, developed by Isabel Briggs Myers and Katharine Cook Briggs, and the Keirsey Temperament Sorter, developed by David Keirsey. Keirsey referred to INTJs as Masterminds,[4] one of the four types belonging to the temperament he called the Rationals.[5]
</p>
</body>
</html>
希望这就是您想要的。