40 lines
892 B
Vue
40 lines
892 B
Vue
<script lang="ts" setup>
|
|
const {src, link, jahr, fontSize}=defineProps(["src", "link","jahr","fontSize"]);
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="embla__slide slider-image item"
|
|
style="margin-left: 1rem; margin-right: 1rem"
|
|
>
|
|
<div class="slide-content">
|
|
<div class="item-img">
|
|
<div class="item-wrapper">
|
|
<NuxtLink :to="link">
|
|
<img
|
|
:src="
|
|
src
|
|
"
|
|
/>
|
|
<span class="jahr-overlay" v-if="jahr" :style="{'font-size': fontSize+'px'}">
|
|
{{ jahr }}
|
|
</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.item-wrapper {
|
|
position: relative;
|
|
}
|
|
.jahr-overlay {
|
|
color: white;
|
|
mix-blend-mode: difference;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
</style>
|