How can i overlay an image with a list?

Basically i want to put in a grid item, an image that when i hover it, displays a list recipie.

Can you post a link to your current code and then explain what part of the code (line numbers, etc…) you are trying to do this? Also, explain what you want to happen versus what is actually happening when your code runs.


Sorry, i have my code but i dont know how to link it here.
Do i have to link it from github? how can ia do it?
If you are comfortable i can paste it here.

If the code length is not too many lines, then you can paste it in here. You can always paste the url to the github repository containing your code.

To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


Okey what i’m trying to do is an overlay image that when i hover it will disappear and a list recipie is shown.
I can do it without an image as I did it in my code. But when I try to put an image to make the effect, it doesn´t work.
The link contain just an index.html and a main.scss file.

i want to emulate this but in a grid with scss.

How do I access these? They are local files?

@import "../helper/placeholders";//placeholders
@import "../helper/mixins";//mixins

Here i uploaded those files tu the github repository. Those were local files were i put mixins and placeholders.