在图上添加悬停效果

Question

我目前正在使用图形元素和图形标题，我希望将鼠标悬停在图像上时会有 50% 的灰色不透明度覆盖和白色文本，单击时会通过以下方式将您带到另一个页面链接/

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

干杯，谢谢！

这是我的 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>

    /* ======================= 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;
}

Answer 1

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

  /* ======================= 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;
}

figure:hover:after{
  content: "";
  background-color: black;
  opacity: .5;
  position: absolute;
  width: 30%;
  height: 100%;
}

<a href="google.com"><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></a>