Easy image as a link button with optional header text and body text (HTML, CSS, Shopify)

img_link_text.html

<!--
If you're using Shopify/Jekyll/Anything that uses Liquid Templating, you can drop this in your includes dir and use the following to generate it:

{% include img_link_text.html 
	width="100%" <-- supports any typical CSS sizing property
	header="Some Header"
	text="Some body text
	img="/path/to/your/img.png"
	link="/path/to/web/link"
%}

-->

<div style="position: relative; text-align: left; color: white; width: {{ include.width }};">
	<a href="{{ include.link | relative_url }}">
		<img style="width: 100%;" alt="A screengrap from the game" src="{{ include.img | relative_url }}"/>
		<div style="position: absolute; 
				bottom: 0px; 
				left: 0px; 
				padding: 8px; 
				width: 100%; 
				background: rgb(0,0,0);
				background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
				">
			{% if include.header %}
			<h2 style="color:white;">{{ include.header }}</h2>
			{% endif %}

			{% if include.text %}
			<p style="color:white;"> {{include.text}} </p>
			{% endif %}
		</div>
	</a>
</div>
<br/>