Html 在图形上添加悬停效果

我目前正在使用一个图形元素和图形标题，我希望这样，当鼠标悬停在图像上时，将有一个50%的灰色不透明度和白色文本覆盖，当单击时，将通过href转到另一个页面/

我最好如何使用当前代码来解决这个问题

干杯，谢谢

这是我的HTML：

  <figure>
      <img src="imgs/superfood-fresh-pink-raspberrys.jpg" class="superfoodcara"
      alt="A pile of fresh pink raspberrys">
      <figcaption class="figcap-bold"> Raspberries</figcaption>
      <figcaption>Red Raspberries contain strong antioxidants such as Vitamin C, quercetin and gallic acid that fight against cancer, heart and circulatory disease and age-related decline. They are high in ellagic acid, a known chemopreventative, and have been shown to have anti-inflammatory properties.</figcaption>
  </figure>

  <figure>
      <img src="imgs/superfood-fresh-bright-red-strawberrys.jpg" class="superfoodcara"
      alt="A pill of fresh bright red strawberrys">
      <figcaption class="figcap-bold"> Strawberries</figcaption>
      <figcaption>Strawberries are an excellent source of vitamins C and K as well as providing a good dose of fibre, folic acid, manganese and potassium. They also contain significant amounts of phytonutrients and flavanoids which makes strawberries bright red.</figcaption>
  </figure>


  <figure>
      <img src="imgs/superfood-freshly-picked-blueberrys.jpg" class="superfoodcara"
      alt="A pile of fresh clean blueberrys">
      <figcaption class="figcap-bold"> Blueberries</figcaption>
      <figcaption>The fiber, potassium, folate, vitamin C, vitamin B6, and phytonutrient content in blueberries supports heart health. The absence of cholesterol from blueberries is also beneficial to the heart. Fiber content helps to reduce the total amount of cholesterol in the blood and decrease the risk of heart disease.</figcaption>
  </figure>

  <figure>
      <img src="imgs/superfood-fresh-acai-berries.jpg" class="superfoodcara"
      alt="A pill of fresh acai berries">
      <figcaption class="figcap-bold"> Acai Berries</figcaption>
      <figcaption>Thanks to their high antioxidant content, acai berries have many potential health benefits. They're loaded with powerful plant compounds that act as antioxidants and could have benefits for your brain, heart and overall health. They also deliver healthy fats and fiber, making them a generally healthy food.</figcaption>
  </figure>

  <figure>
      <img src="imgs/superfood-fresh-wild-blackberrys.jpg" class="superfoodcara"
      alt="A pile of fresh wild blackberrys">
      <figcaption class="figcap-bold"> Blackberries</figcaption>
      <figcaption>Blackberries contain a wide array of important nutrients including potassium, magnesium and calcium, as well as vitamins A, C, E and most of our B vitamins. They are also a rich source of anthocyanins, powerful antioxidants that give blackberries their deep purple colour.</figcaption>
  </figure>


  <figure>
      <img src="imgs/superfood-fresh-organic-cranberrys.jpg" class="superfoodcara"
      alt="A pile of fresh organic cranberrys">
      <figcaption class="figcap-bold"> Cranberries</figcaption>
      <figcaption>Many people consider cranberries to be a superfood due to their high nutrient and antioxidant content. In fact, research has linked the nutrients in cranberries to a lower risk of urinary tract infection (UTI), the prevention of certain types of cancer, improved immune function, and decreased blood pressure.</figcaption>
  </figure>

---

要使其成为链接，必须在图形周围放置锚定标记或使用脚本。您可以使用：after获得所需的视觉效果，如下所示。这看起来有点奇怪，因为我不想改变你的CSS太多，但它应该给你一个足够好的想法

/*========================================================================================================================================================================*/
.柔性容器{
显示器：flex；
柔性包装：包装；
左边距：15%；
保证金权利：5.22%；
}
/*================================================超级食品图像-flexbox============================================================*/
身材{
显示器：flex；
柔性流动：柱；
宽度：30%；
身高：375px；
边缘底部：265px；
右侧填充：30px；
边缘顶端：40px；
}
超级食品公司{
身高：375px；
}
/*========================================================================================*/
菲卡普顿{
背景色：#F2F2；
颜色：#000000；
填充：5px15px 10px 15px；
文本对齐：居中；
}
图：悬停：之后{
内容：“；
背景色：黑色；
不透明度：.5；
位置：绝对位置；
宽度：30%；
身高：100%；
}

您是否尝试使用css

图：悬停{opacity:0.5；}图>a{display:block；}。这不会改变css中的其他元素，因为锚点具有display:block，它将填充完整的图形内容。

    /* ======================= superfood flexbox ======================= */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: 15%;
  margin-right: 5.22%;
}

/* ======================= superfood image - flexbox ======================= */
figure {
    display: flex;
    flex-flow: column;
    width: 30%;
    height: 375px;
    margin-bottom: 265px;
    padding-right: 30px;
    margin-top: 40px;
}

.superfoodcara {
    height: 375px;
}

/* ======================= superfood image caption ======================= */
figcaption {
    background-color: #f2f2f2;
    color: #000000;
    padding: 5px 15px 10px 15px;
    text-align: center;
}