В настоящее время я работаю с элементом фигуры и подписью к фигуре, и я sh сделаю так, чтобы при наведении курсора на изображение наложение с серой непрозрачностью 50% с белым текстом, которое при нажатии приведет вас к другая страница через href /
Как мне лучше всего go обойти это с моим текущим кодом?
Приветствия и спасибо!
Вот мой 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;
}