Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show zoom-in pointe only when ready

Browse Source
This commit is contained in:
Alexander Bocken 2023-07-13 17:30:36 +02:00
parent 94848e505f
commit 878aeff52d
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/TitleImgParallax.svelte
View File

@ -114,7 +114,6 @@ div:has(.placeholder){
width: min(1000px, 100dvw); width: min(1000px, 100dvw);
height: max(60dvh,600px); height: max(60dvh,600px);
overflow: hidden; overflow: hidden;
cursor:zoom-in;
} }
.unblur#image{ .unblur#image{
filter: blur(0px) !important; filter: blur(0px) !important;
@ -152,11 +151,14 @@ dialog button{
top: -2rem; top: -2rem;
right: -2rem; right: -2rem;
} }
.zoom-in{
cursor: zoom-in;
}
</style> </style>
<section class="section"> <section class="section">
<figure class="image-container"> <figure class="image-container">
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={show_dialog_img}> <div class:zoom-in={isloaded} on:click={show_dialog_img}>
<div class=placeholder style="background-image:url({placeholder_src})" > <div class=placeholder style="background-image:url({placeholder_src})" >
<div class=placeholder_blur> <div class=placeholder_blur>
<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/> <img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>