sarsooxyz.hugo/layouts/shortcodes/image-box-link.html

62 lines
2.0 KiB
HTML
Raw Normal View History

2022-09-16 22:55:18 +01:00
<div>
<div style="
border: 50px black;
position: relative;
background-size: cover;
background-position: 50%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin-top: 20px;
margin-bottom: 20px;">
<span aria-hidden="true" style="
border: none;
border-radius: 10px;
opacity: .5;
background-color: black;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 1; "></span>
<img loading="lazy" alt="" src="{{ .Get "src" }}" style="
/* object-position:38% 50%; */
z-index: 0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: 0;
padding: 0;
width: 100%; height: 100%;
object-fit: cover;
outline: none;
border: 4px solid black;
border-radius: 10px;
box-shadow: 5px 5px;">
<div style="
z-index: 1;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 5%;
margin-left: 5%;">
<p style="
font-size:30px; color: white;
margin: auto;
text-align: center;
text-shadow: 0px 2px black;">
<a href="{{ .Get "href" }}"
style="
color: white;
cursor: pointer;
text-underline-offset: 3px;
text-decoration-skip-ink: all;">{{ .Get "title" }}</a>
</p>{{if isset .Params "caption" }}
<p style="
color: white;
text-align: center;
font-family: monospace;
margin: auto;
margin-top: 20px;
text-shadow: 0px 1px black;">{{ .Get "caption" }}</p>{{end}}
</div>
</div>
</div>