CSS 图像 Hover 效果？

Question

我希望我的图像悬停看起来像这样，但由于某种原因，我的 CSS 样式不起作用。 您可能会注意到每个 CSS 样式选项中的#content 。 那是因为我只希望这些 styles 应用于我网站的某个部分。 我在网上查看并使用了 W3Schools 资源，但由于某种原因，它仍然无法正常工作。 我的图像没有 hover 效果。

 #content.container { position: relative; width: 50%; } #content img { width: 100%; height: auto; border-radius: 50%; } #content.column { float: left; width: 33.33%; padding: 5px; } #content.row::after { content: ""; clear: both; display: table; } #content.overlay { position: absolute; bottom: 100%; left: 0; right: 0; background-color: #008CBA; overflow: hidden; width: 100%; height: 0; transition: .5s ease; border-radius: 50%; } #content.img:hover.overlay { bottom: 0; height: 100%; opacity: 0.5; } #content.text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }

 <div class="container"> <div class="column"> <div class="team"> <div class="img"> <img src="/static/img/team/team-1.jpg" alt="" style="width: 200px;"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> <h3 class="team-prof"> <a href="#">Dr. Pawan Kumar Kesari</a> </h3> </div> </div> </div>

Answer 1

你的代码有缺陷。 没有共享容器。 css 规则中标识符和类之间没有空格。 #content.overlay有一个height: 0 - 这使得 object 不可见。 我的答案并不完美，但我已经整理了一些代码。

 .main { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; }.main_content { display: flex; justify-content: space-between; flex-wrap: wrap; width: 1000px; }.main_content_box { display: flex; flex-direction: column; align-items: center; cursor: pointer; }.main_content_box_image { position: relative; }.main_content_box:hover >.main_content_box_image p { display: flex; }.main_content_box:hover >.main_content_box_image img { filter: brightness(25%); }.main_content_box:hover a { color: #337ab7; }.main_content_box_image img { width: 250px; height: 250px; border-radius: 125px; /* or 50%*/ transition: .5s; }.main_content_box_image p { display: none; position: absolute; top: 40%; left: 20%; right: 0; font-size: 14px; color: #fff; }.main_content_box a { color: #333; font-size: 16px; font-weight: bold; text-decoration: none; margin: 20px 0 0 0; }

 <div class="main"> <div class="main_content"> <div class="main_content_box"> <div class="main_content_box_image"> <img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt=""> <p>MBBS, General Physician</p> </div> <a href="#">Dr. Pawan Kumar Kesari</a> </div> <div class="main_content_box"> <div class="main_content_box_image"> <img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt=""> <p>MBBS MD(Medicine) General Physician</p> </div> <a href="#">Dr. Nitin Kumar Srivastava</a> </div> <div class="main_content_box"> <div class="main_content_box_image"> <img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt=""> <p>MBBS General Consultant and Diabetician</p> </div> <a href="#">Dr. (Mrs) Halima</a> </div> </div> </div>

Answer 2

看来您没有很好地遵循本指南。

您还没有确定#content是什么。

您需要修改在 CSS 中定位 ID、类和元素的方式。

这是您根据指南修改的代码，以及我在#content中为您添加的代码。

 #content.img { position: relative; width: 50%; } #content img { display: block; width: 200px; height: auto; border-radius: 50%; } #content.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 200px; opacity: 0; transition: .5s ease; background-color: #008CBA; border-radius: 50%; } #content.img:hover.overlay { opacity: 1; } #content.text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }

 <div id="content"> <div class="container"> <div class="column"> <div class="team"> <div class="img"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt=""> <div class="overlay"> <div class="text">Hello World</div> </div> </div> <h3 class="team-prof"> <a href="#">Dr. Pawan Kumar Kesari</a> </h3> </div> </div> </div> </div>