如何在悬停和单击时为照片添加标题叠加层？答案

【问题标题】：How do I add a caption overlay to a photo on hover AND click?如何在悬停和单击时为照片添加标题叠加层？
【发布时间】：2017-01-05 20:46:57
【问题描述】：

我正在尝试为照片添加标题。我希望名称始终出现在照片下方，而我希望标题显示在悬停和单击时（并保持可见直到再次单击）。这可能吗？我可以分别做这两个动作，但不能一起做。

我的另一个选择是在普通屏幕上使用悬停，在移动设备上使用点击选项。

这是我正在使用的：

<!DOCTYPE html>
<html>
<head>

<script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img").click(function(){
$("p").toggle();
});
});

</script>

<style>
.container {
    position: relative;
    width: 400px;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

p   {
  background-color: none;
  font-family:sans-serif;
  font-style:italic;
  color: black;
  font-size: 14px;
  line-height:24px;
  padding: 12px 12px;
}

.container:hover  .image {
  opacity: 0.2;
}

.container:hover  .middle {
  opacity: 1;
}

.text p{
  background-color: none;
  font-family:sans-serif;
  font-style:italic;
  color: black;
  font-size: 14px;
  line-height:24px;
  text-align: center;
  padding: 12px 12px;
}
</style>
</head>

<body>

<div class="container">

  <img src="https://static1.squarespace.com/static/511526cde4b067782b69109c/517aa359e4b0ab81ac8d931c/517aa396e4b041a7f26623d5/1366991956677/05-corporate-headshot-photo-WBEZ+-+Chicago+Public+Media_Edwards_Steve_Programming_120328_1210.psd.JPG-1500px.JPG" alt="Avatar" class="image" style="width:100%">

    <div class="middle">

    <p class="text">Rodney Erickson is a content marketing professional at HubSpot, an inbound marketing and sales platform that helps companies attract visitors, convert leads, and close customers. Previously, Rodney worked as a marketing manager for a tech software startup. He graduated with honors from Columbia University with a dual degree in Business Administration and Creative Writing."</p>

    </div>

    <p>RODNEY ERICKSON, M.B.A.<br>Content Marketing</p>

    </div>  

</body>
</html>

谢谢:)

【问题讨论】：

标签： jquery html css image caption

【解决方案1】：

当然，所以我不会使用 javascript 在点击时切换标题本身，而是使用 javascript 来切换容器上的 class。

然后在 CSS 中，您可以确保当容器悬停时，或者当它具有该特殊类时，两种情况都显示标题。其他任何时候，您的标题都会被隐藏。

希望这会有所帮助！

【讨论】：