Css 如何使文本有条件地出现在"；：主动的；按钮的状态，但以其他方式隐藏？

我正在使用CSS按钮创建一个图像库，其中单击时使用

：focus

状态放大每个图像，再次单击时使用“：active”状态显示图像描述。当松开按钮时，说明将隐藏，当用户单击其他位置时，图像将恢复为缩略图大小或放大不同的图像。以下是我的CSS：

div.img button{
-webkit-transition: width 2s, height 2s, ease .25s;
transition: width 2s, height 2s, ease .25s;
  }

.mdT {
display:inline-block;
width:100px;
height:100px;
margin:2px;
border:0px;
outline:0px;
vertical-align:top;
background-color:inherit;
  }

  .mdT:focus {
width:500px;
height:500px;
background-position: left top;
background-repeat:no-repeat;
background-color: inherit;
  }

  .mdT:active {
margin-bottom: 25px;
  }

  .mdI1       {   background-image:url(01a.jpg);     }
  .mdI1:focus {   background-image:url(01.jpg);     }
  .mdI2       {   background-image:url(02a.jpg);     }
  .mdI2:focus {   background-image:url(02.jpg);   }
  .mdI3       {   background-image:url(03a.jpg);     }
  .mdI3:focus {   background-image:url(03.jpg);   }
  .mdI4       {   background-image:url(04a.jpg);     }
  .mdI4:focus {   background-image:url(04.jpg);   }

这是我的html：

<div class="img">
  <h2>Image Set 1</h2>
  <button class="mdT mdI1" ></button>
  <button class="mdT mdI2" ></button>
  <button class="mdT mdI3" ></button>
  <button class="mdT mdI4" ></button>
</div>

图像集1

请注意：

我希望在

：active

状态期间，图像描述显示在

25px

边距创建的空间内

我将调整这些元素的宽度和高度以后，一旦我得到了所有的源图像排序。现在我正在使用类似我的StackOverflow个人资料图片的占位符，只是为了确保它们能正常工作

主要是我不确定我需要什么样的代码，把它放在哪里，以及如何调整它，使它对每个按钮都是唯一的

---

我对用计算机语言写作还比较陌生，所以在你的回答中，请假设我对我正在做的事情一无所知。谢谢

你应该摆弄工作图形，比如placekitten.com或类似的东西。你当前的代码有什么问题吗？Re Oriol：基本上，问题是我不知道如何或在哪里添加图像描述，以使它们按照我指定的方式工作（隐藏在“：active”期间除外）状态，在25px边距创建的空间内（下降）。他们应该为单个按钮输入CSS代码吗？是否应该在CSS代码中为单个按钮和HTML正文中修改的描述创建占位符？等等@jmargolisvt这是怎么回事？我似乎取得了一些进展，但现在我似乎无法显示“”中的文本。我希望它在图像后面“隐藏”，直到按钮处于“活动”状态，然后在该状态下显示在由边距创建的空间中。更多进展：现在我已经准备好了z索引，以便在我获得文本以我想要的方式运行时使用。仍然不能让它粘在按钮的底部边缘。你应该摆弄一下工作图形，比如placekitten.com或类似的网站。您当前的代码有什么问题？Re Oriol：基本上，问题是我不知道如何或在哪里添加图像描述，以便它们按照我指定的方式运行（在：active（活动）状态下隐藏除外，在25px边距创建的空间内。他们应该为单个按钮输入CSS代码吗？是否应该在CSS代码中为单个按钮和HTML正文中修改的描述创建占位符？等等@jmargolisvt这是怎么回事？我似乎取得了一些进展，但现在我似乎无法显示“”中的文本。我希望它在图像后面“隐藏”，直到按钮处于“活动”状态，然后在该状态下显示在由边距创建的空间中。更多进展：现在我已经准备好了z索引，以便在我获得文本以我想要的方式运行时使用。仍然无法使它粘到按钮的底部边缘。