使用HTML/CSS创建显示描述的卡片时出现的问题

我正在尝试制作一张卡片，当你将鼠标移到上面时，卡片上会显示一个描述。到目前为止，我已经做到了：。代码也被添加到文章的末尾

有两件事让我难以忘怀：

如何将div添加到鼠标悬停时显示的空白处，以便在未悬停时隐藏？当鼠标不在卡片上方时，我尝试的任何东西都是可见的

如何使图像的宽度在动画制作时不减小

这些问题在某种程度上是相关的，因为它们都涉及到创建可以滑入或滑出视图的div

我正在使用谷歌的Material Design Lite前端框架

任何帮助或指导都将不胜感激

CSS:

HTML:

纽约市
香港

有两件事让我难以忘怀：

如何将div添加到鼠标单击时显示的空白处 在上面，这样当你没有被鼠标移动的时候它就隐藏了？我要什么 当鼠标不在卡上时，try可见

如何使图像的宽度不随动画而减小 出去

您可以使用文本设置div的

max height

这可以通过使用

背景大小

属性来解决，但请记住，图像的纵横比是这个问题中最重要的部分。因此，我建议使用相同纵横比的图像来轻松处理它们

.mdl卡{
高度：275px；
}
.project.mdl-card\u支持文本{
最大高度：0px；
填充：0 16px；
-webkit过渡：最大高度0.25s；
过渡：最大高度0.25s；
过渡计时功能：立方贝塞尔（0.4,0.0,1,1）；
}
.mdl单元格：悬停.mdl-card\u支持文本{
最大高度：300px；
}
.mdl-card__介质{
框大小：边框框；
背景尺寸：封面；
填充：0 24px 0 24px；
显示器：flex；
柔性生长：1；
弯曲方向：行；
对齐项目：柔性端；
光标：指针；
-webkit过渡：flex增长0.25秒；
过渡：柔性增长0.25秒；
过渡计时功能：立方贝塞尔（0.4,0.0,1,1）；
}
.mdl单元格：悬停.mdl-card\u介质，
.mdl-cell.hover.mdl-card\u介质{
flex-grow:0；
}
#纽约市{
背景尺寸：220%自动；
背景图片：url(https://www.newyorksocialnetwork.com/wp-content/gallery/welcome/nyc-skyline_web.jpg);
}
#香港{
背景尺寸：100%自动；
背景图片：url(https://news.efinancialcareers.com/wp-content/uploads/2014/11/HK2.jpg);
}

纽约市
香港，正式成为中华人民共和国香港特别行政区，是东亚珀尔里弗河口东侧、广东大陆南部和东部的自治领土。
前葡萄牙殖民地和澳门特别行政区同胞。
香港
香港，正式成为中华人民共和国香港特别行政区，是东亚珀尔里弗河口东侧、广东大陆南部和东部的自治领土。
前葡萄牙殖民地和澳门特别行政区同胞。

类似的内容：这会破坏动画效果。我试图坚持材料设计原则。有没有办法保留动画，只是在出现的空白处有一些文字？我想你可能误解了。我不想在卡片未被鼠标移过时隐藏标题（例如纽约市）。我想要一个描述，它没有显示在js小提琴中，在你鼠标悬停时可以在你看到的空白处看到，但在你没有鼠标悬停时隐藏如果这与你要求的接近，让我来，我会修复动画并给出答案，在你的HTML内容中没有任何描述，让我再做一个js提琴，显示鼠标移到上面时我想要它的样子，因为我似乎没有清楚地描述它。三个div的大小不等于这张卡片的大小。这将显示卡片中间出现的文本的外观。看这张截图，我在动画中看到了我的意思，无法复制。

.mdl-card{
    height: 275px;
}

.mdl-card__media {

  box-sizing: border-box;
  background-size: cover;
  padding: 0 24px 0 24px;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: flex-end;
  cursor: pointer;
  -webkit-transition: flex-grow 0.25s;
  transition: flex-grow 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);;

}

.mdl-cell:hover .mdl-card__media, .mdl-cell.hover .mdl-card__media {
    -webkit-transition: flex-grow 0.3s; /* Safari */
    transition: flex-grow 0.25s;
    transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
    flex-grow: 0;
}

#nyc{
    background-image: url('http://com.postmates.img.prod.s3.amazonaws.com/9fcb0858-0759-4e78-874b-bdcc2a048181/orig.jpg');
}
#hkg{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Hong_Kong_Island_Skyline_2009.jpg/1200px-Hong_Kong_Island_Skyline_2009.jpg');
}

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
<div class="project-holder mdl-grid">
  <div class="project mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp">
    <div class="mdl-card__media" id="nyc"></div>
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">New York City</h2>
    </div>
  </div>

  <div class="project mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp">
    <div class="mdl-card__media" id="hkg"></div>
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">Hong Kong</h2>
    </div>
  </div>
</div>