flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Change Location hover photo change effect

Browse Source
This commit is contained in:
Félix Péault
2021-10-02 13:24:17 +02:00
parent a47617d895
commit ec77cde75d
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/molecules/Location.svelte
View File

@@ -8,7 +8,6 @@
import Badge from '$components/atoms/Badge.svelte' import Badge from '$components/atoms/Badge.svelte'
export let location: any export let location: any
export let index: number
const { settings: { limit_new }}: any = getContext('global') const { settings: { limit_new }}: any = getContext('global')
const { name, slug, country, date_updated } = location const { name, slug, country, date_updated } = location
@@ -72,12 +71,14 @@
{/if} {/if}
</div> </div>
</a> </a>
<div class="location__photos"> {#if location.photos.length}
{#each location.photos as photo, index} <div class="location__photos">
<Image {#each location.photos as photo, index}
class={index === photoIndex ? 'is-visible' : null} <Image
id={photo.image.id} alt={photo.image.title} width={240} height={160} quality={70} class={index === photoIndex ? 'is-visible' : null}
/> id={photo.image.id} alt={photo.image.title} width={240} height={160} quality={70}
{/each} />
</div> {/each}
</div>
{/if}
</div> </div>

12
src/style/molecules/_location.scss
View File

@@ -109,7 +109,7 @@
left: 50%; left: 50%;
width: 240px; width: 240px;
height: 160px; height: 160px;
background: #444; background: #222;
border-radius: 6px; border-radius: 6px;
transform: translate3d(calc(-50% + var(--offset-x)), calc(-50% + var(--offset-y)), 0) rotate(var(--rotate)); transform: translate3d(calc(-50% + var(--offset-x)), calc(-50% + var(--offset-y)), 0) rotate(var(--rotate));
overflow: hidden; overflow: hidden;
@@ -122,7 +122,13 @@
} }
picture { picture {
display: none; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s;
img { img {
display: block; display: block;
@@ -132,7 +138,7 @@
} }
&.is-visible { &.is-visible {
display: block; opacity: 1;
} }
} }
} }