hjelp med hover text over bilde html/css

[CarbonDRFT]

 Jeg har designet hjemmeside på adobe xd til et skoleprosjekt og den skal jeg nå til å kode. Jeg merker at jeg har laget litt avansert design på adobe xd og søker hjelp av dere som er mye mye flinkere enn meg på html og css. 

Det jeg vil fram til er at når jeg peker musen over bildet, så er det hover på bilde hvor det er background-color: gradient svart farge på toppen og lysere på bunnen på bilde, samtidig tekst dukker opp på det mørke feltet. 

Legger til 2 bilde hvor ene bildet er standard og den andre bildet er når jeg har pilen over bildet. 

Hvordan koder jeg det inn? 

[oddeh]

Det du sikter til heter gradient og kan gjøres med hover i CSS.
https://www.w3schools.com/cssref/sel_hover.asp

Endret 22. oktober 2020 av oddeh

[CarbonDRFT]

jeg sliter virkelig her. Har sitti 5 timer nå og prøvd å få det til å gå. jeg er nok bare altfor dum hahah. 

Ønsker virkelig å få det til å gå. Når jeg hover pilen min over bildet, så skal det dukke opp både text (som jeg har fått til) og at det også er gradient svart på top med høy opacity or bunn lav opacity, som vist på bilde nr 2 første innlegg.

legger til 2 nye bilder som viser det jeg har fått til. 

 

Jeg ønsker at bildet skal være responsive og bruke hele grid.

bildet dekker nesten halvparten av grid-area: box4; og er ikke responsive. 

her er koden til kun bildet :

Håper noen kan hjelpe til med dette? Takker stort på forhånd. 

 

<section class="one">

<div class="box4">

<a href="#" class="link__men-jacket"

><span class="text"> <h1>Click here to go to mens jacket</h1> </span>

<img src="img/Men-Style-in-Monsoon.jpg"

alt="New-Men-Jackets"

class="new__men--img"/>

</a>

<div class="image_overlay"></div>

</div>

 

<div class="box5"></div>

</section>

 

 

CSS: 

 

.one {

width: 100%;

display: grid;

grid-template-areas: "box4 box5";

}

 

.new__men--img,

.box4 {

background-color: indianred;

height: 200px;

grid-area: box4;

background-size: cover;

background-position: center;

object-fit: cover;

}

.link__men-jacket {

position: absolute;

}

 

.link__men-jacket .text {

position: absolute;

z-index: 10;

opacity: 0;

transition: all 0.8s ease;

}

 

.link__men-jacket .text h1 {

margin: 0;

color: white;

display: flex;

align-items: center;

}

 

.link__men-jacket:hover .text {

opacity: 1;

display: flex;

align-items: flex-end;

}

 

.box5 {

background-color: lemonchiffon;

height: 200px;

grid-area: box5;

}