Add Hover effect on Figure - html

Question

I'm currently working with a figure element and figure caption and I wish to make it so that when hovered over the image will have a 50% grey opacity overlay with white text, that when clicked will take you to another page via href/
How would I best go around this with my current code?
Cheers and thank you!
Here is my 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

To make it a link, you'll have to put an anchor tag around the figure or use scripting. You can get the visual result you want by using :after like below. It looks a little odd as I didn't want to change your CSS too much but it should give you a good enough idea.
/* ======================= 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>