时间戳

首页 > 解决方案 > CSS文本块不适合其父宽度：悬停

html - CSS文本块不适合其父宽度：悬停

问题描述

FI 一直在研究多种解决方案，因为我想在图像中包含文本：悬停在我的第一个致敬页面上。虽然，事实证明这比我想象的要困难得多。我一直在寻找@keyframes，但遇到了麻烦，因为我无法用它做我想做的事。相当接近，但不够接近。

最后，我找到的最佳解决方案是您当前可以在此页面上看到的解决方案：https ://codepen.io/shalvus/pen/rNamLWO

我的问题可以在那里看到：https ://i.gyazo.com/b1540e9e0902acac2813afcf01d0cfab.mp4

正如你所看到的，它正在做它的工作，但我似乎无法找到一种方法来让那个丑陋的边界消失。我一直在尝试很多不同的方法来让它工作，但似乎没有一个能让它消失。不过我不是专家，我想我会依靠你的技能来帮助我。这是与问题相关的 CSS：

.relative{
  display:flex;
  justify-content:space-around;
}

.A, .A img{
  width:95%;
  height:auto;
  filter:grayscale(1);
  border:0px solid transparent;
  border-radius:50%;
}

.A{
  overflow:hidden;
}

.C{
  position:absolute;
  width:inherit;
  height:100%;
  top:100%;  
  background-color:rgba(0,0,0,0.6);
  transition: all 0.7s;
  text-align:center;
  color:white;
  font-family:'Montserrat', sans-serif;
  font-size:1.6em;
}

.A:hover .C{
  top:70%;
}

.img:hover .A{
  filter:grayscale(0);
}

谢谢你的任何回答！

PS：我也在尝试让最后一部分“.img:hover .A{”取消悬停时的灰度值，但它也不起作用。如果有人有线索，我会很高兴听到，但这是一个相当小的问题。

标签： htmlcss

解决方案

尝试更换

.A, .A img{
  width:95%;

和

.A {
  margin: 0 5px;
}
.A, .A img{
  width:100%;

看看这是否是你想要的。该代码非常不言自明。

html {
  font-size:10px;
}

body {
  margin:0px;
}

main {
  background-color:#EAEAEA; 
}

h1 {
  font-family:'Ubuntu';
  color:#FFF;
  font-size:6em;
}

h2 {
  font-family:'Catamaran', sans-serif;
  color:#FFF;
  font-size:2em;
}

#tmain {
  background-color:#0B0B0B;
  padding:1.5em;
  padding-bottom:3em;
  margin:5px;
  text-align:center;
}

.relative{
  display:flex;
  justify-content:space-around;
}

.A {
  margin: 0 5px; /* add this to give a space between the circles */
}
.A, .A img{
  width:100%; /* change from 95% to 100% */
  height:auto;
  filter:grayscale(1);
  border:0px solid transparent;
  border-radius:50%;
}

.A{
  overflow:hidden;
}

.C{
  position:absolute;
  width:inherit;
  height:100%;
  top:100%;  
  background-color:rgba(0,0,0,0.6);
  transition: all 0.7s;
  text-align:center;
  color:white;
  font-family:'Montserrat', sans-serif;
  font-size:1.6em;
}

.A:hover .C{
  top:70%;
}

.img:hover .A{
  filter:grayscale(0);
}
<head>
  <title>Tribute Page</title>
  <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Ubuntu&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Catamaran:200&display=swap" rel="stylesheet">
  <!-- 
font-family: 'Catamaran', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Ubuntu', sans-serif;
-->
</head>

<body>
  <main id=main>
    <div id=tmain>
      <h1>The Art of Doubt</h1>
      <hr width="10%">
      <h2>a lifelong work by Henri Broch, Gérard Majax and other defenders of the Scientific Method</h2>
    </div>

    <div class="relative">
      <div class="A relative">
        <img src="https://i.postimg.cc/MZvLK7Dy/250BROCH.jpg" alt="Henri Broch Portrait">
        <div class="C">Henri Broch</div>
      </div>
      <div class="A relative">
        <img src="https://i.postimg.cc/rF4Y5q7s/250MAJAX.jpg" alt="Gérard Majax Portrait">
        <div class="C">Gérard Majax</div>
      </div>
      <div class="A relative">
        <img src="https://i.postimg.cc/T3XN9ZX9/250-DURAND.jpg" alt="Thomas Durand Portrait">
        <div class="C">Thomas Durand</div>
      </div>
      <div class="A relative">
        <img src="https://i.postimg.cc/BZkV8jYR/250HYG.jpg" alt="Michel Christophe Portrait">
        <div class="C">Michel Christophe</div>
      </div>
    </div>

  </main>
</body>

推荐阅读