Andromeda/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image hover effect

Browse Source
This commit is contained in:
mtgmonkey
2025-10-24 08:47:21 +02:00
parent ed9f3faafe
commit 896ed2c0b8
1 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
templates/shortcodes/size_image.html
View File

@@ -1,4 +1,21 @@
{% set image = resize_image(path=path, width=width, height=height, op="fit") %}
<a href="{{ get_url(path=path) }}" target="_blank">
<img src="{{ image.url }}" />
<a href="{{ get_url(path=path) }}"
style="position:relative; display:inline-block;"
target="_blank"
onmouseenter="this.querySelector('img').style.opacity='0.2'; this.querySelector('span').style.opacity='1';"
onmouseleave="this.querySelector('img').style.opacity='1'; this.querySelector('span').style.opacity='0';">
<img src="{{ image.url }}" style="display:block; transition:opacity 0.3s;">
<span style="
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:black;
font-size:20px;
opacity:0;
transition:opacity 0.3s;
">
Für besseres Foto klicken
</span>
</a>