時間が経っているので解決済みだったら無視してください。

是非ともCSS自作の楽しさに目覚めて頂きたいので、お求めのものとは違ったり、既にご存知だったり、長すぎると思う事もあるかも知れませんが、お役に立てれば幸いです
また自分自身まだ手探りな部分もある為、冗長なコードになってしまっていたらすみません。
コメントにはHTMLタグが使えないようなので、<>を省略します

前提として、CSSは新しくタグを作成するものと、クラスを定義して属性を付与する方法があります
※どちらの場合も条件は{}内に書きます
例えば、
tagName{ /*ここにサイズや表示など設定を書く*/ }
とした場合、これはHTMLタグdivやpなどと同じように<>で囲うような使い方ができます

先頭にドットをつけた場合は属性を上書きできます
.className { /*ここにサイズや表示など設定を書く*/ }
div class='className'
テストテキスト
/div
とすることで、divの特性に加えて、新たにclassNameとして定義した特性を追加出来ます
↑例えば文字を赤くするとか…

tagNameやclassNameの部分は好きな名前をつけてください

元々あるHTMLタグを利用した方が指定しなければいけない条件が減るので、説明は先頭にドットをつける方で行います
まずやる事をまとめます
1 表示領域の定義と画像を設置　位置は中央・サイズを指定
2 リンクボタンを作る
3 画像に重なるように、画像の右下に文字を置けるようにする
4 HTMLをかく
添付の画像を見る限り、文字を斜めにしているのはおそらくCSSなので、特別な条件をつけなければ自然と真っ直ぐになります

1 表示領域の定義と画像を設置　位置は中央・サイズを指定
以下が中央揃えにするCSSです

.center{
text-align: center; /*文字を中央揃えに(正確にはインラインコンテンツを中央揃えにする)*/
}

中央揃えは汎用性が高いのでこれだけで定義しておくと、色々なところで使えます
ちなみに/**/はコメントアウトといってこの中に書いた文字は、動作に影響を及ぼしません。要するにメモ書きです。あってもなくても構いません。
以下HTMLコード

div class='center'
img src='URL'
/div

これで画像を中央に設置出来ます
※ URL部分にはアップロードした画像のURLを記入
因みに、class部分は半角スペースを挟むことで複数の要素を重ねることが出来ます
ただ同じ要素は上書きされるので、一番最後に書かれたものが優先されます(確かそうだったはず...)


・サイズ調整
サイズ調整は色々方法があるのですが、中央揃えにしているので、divタグ2つを利用する方法でやってみようと思います
/*画像表示領域のサイズ調整*/
.titleBack{
width: 10em;/*横幅は10em(フォントサイズ×10) 大きさはお好みで*/
height: 10em;/*縦幅は10em(フォントサイズ×10) 大きさはお好みで*/
}
/**/
.titleImg

/*img用のサイズ調整　画像はdivのサイズに合わせるので、％で相対的にサイズを指定*/
/*.titleBack半角スペースimgとすることで、.titleBack内のimgタグという意味になり、.titleBack内のimgは全て以下の条件が適用されます。
今回は画像一枚の想定なので、この方法をとっています*/
.titleBack img{
width:100%;/*縦幅は親要素の100％のサイズ 基本かえない*/
height:100%;/*縦幅は親要素の100％のサイズ 基本かえない*/
}

HTMLコード

div class='center'
　div class='titleBack'
　　img src='URL'
　/div
/div


これで中央にお好みのサイズで画像を配置することが出来ます
サイズはpx指定も出来ますが、px単位だと絶対的な数値の為、環境による表示崩れが懸念されるので、emやvminなどの単位の方が良いでしょう
単位に関して参考：https://codeisle.info/blog/385/


2 リンクボタンを作る
リンクボタンはbuttonやinputタグを使用したり、画像を使用するよりaタグでボタンテキストの背景に色を付ける方法が簡単なのでそちらをご紹介します
まず、リンクはいくつかの状態定義が必要です。
・何もしていないとき
・マウスカーソルを合わせた時(PCのみ)
・クリックした瞬間
・リンクを踏んだ後
以上などの状態で色を変えているのをよく見ます。

まず基本の状態をつくります。
/*後で表示を右下にする関係で.titleButtonGroupでリンクボタンを囲う予定*/
.titleButtonGroup a{
padding: 0 0.2em;/*文字描画領域の外側に範囲を広げる　縦：0　横：0.2em（背景の色を文字部分より大きめにしています）*/

color: #000000;/*文字色の設定　黒*/
background-color: white;/*背景色を設定　規定値のwhite を使用しているが　#ffffffというカラーコードでも良い*/
text-decoration: underline;/*アンダーラインをつける　消すときはunderline の部分をnoneにする*/
}

次に以下の状態の時の文字色と背景色を変更したい色に設定すればリンクボタンは完成です
(お好みでアンダーラインの有無も設定)
/*リンク先が存在するとき*/
.titleButtonGroup a:link{}
/*マウスカーソルがあっている時(PCのみ)*/
.titleButtonGroup a:hover{}
/*押した瞬間*/
.titleButtonGroup a:active{}
他にもいくつかリンクの状態があった気がするので、気になったら調べてみてください
カラーコード参考：https://www.colordic.org/


3 画像に重なるように、画像の右下に文字を置けるようにする
まず右揃えですが、中央揃えと同じように設定します
.right{
text-align: right;
}
次に画像に重なるように文字を置けるようにします
.titleButtonGroup{
margin-top: -2em;/*上に2em分ずらします　数値はお好みで*/
padding-right: 0.5em;/*右に0.5em分余白を作ります　数値はお好みで*/
}

4 HTMLをかく
<>は除いています

中央揃えに
div class='center'
　10em×10emサイズに
div class='titleBack'
　　titleBackのサイズに画像を整える
img src='URL'
　　画像の右下にボタン配置　右寄せにする
div class='titleButtonGroup right'
a href='URL'
ボタンテキスト
/a
a href='URL'
ボタンテキスト
/a
/div
/div
/div

これで画像重なるよう右下にリンクボタンを表示することが出来るのではないかと思います
認識ずれていたり、説明不足な点があったらすみません

リファレンスが結構役に立つので、もしCSS作成に興味があれば以下サイトが参考になりますよ
HTML5参考：https://www.htmq.com/html5/
CSS3参考：https://www.htmq.com/css3/

スクショ下部にTemplate by…とテンプレ配布サイトのURLが載せられているように見えるのですが、URLが無効、もしくはスクショ自体も拾い画で…という事でしょうか？
名前+テンプレートで検索しても出てきたので、配布元から借りるといいと思います。