traxxx/assets/components/movies/tile.vue

<template>
	<div class="tile">
		<div class="cover">
			<img
				v-if="movie.covers[0]"
				:src="`/media/${movie.covers[0].thumbnail}`"
				class="front"
			>

			<img
				v-if="movie.covers[1]"
				:src="`/media/${movie.covers[1].thumbnail}`"
				class="back"
			>
		</div>

		<div class="details">{{ movie.entity.name }}</div>
		<h3 class="title">{{ movie.title }}</h3>
	</div>
</template>

<script>
export default {
	props: {
		movie: {
			type: Object,
			default: null,
		},
	},
};
</script>

<style lang="scss" scoped>
.tile {
	display: flex;
	flex-direction: column;
	background: var(--background);
	box-shadow: 0 0 3px var(--darken);
	font-size: 0;
}

.details {
	color: var(--text-light);
	background: var(--profile);
	padding: .5rem 1rem;
    font-size: .8rem;
	font-weight: bold;
}

.cover {
	img {
		width: 100%;
	}

	.back {
		display: none;
	}

	&:hover {
		.back {
			display: block;
		}

		.front {
			display: none;
		}
	}
}

.title {
	padding: 1rem;
	margin: 0;
	font-size: 1rem;
}
</style>