写一个VUE好看的相册展示代码

非常感谢您的提问，我可以为您提供一个基于Vue的相册展示代码，如下所示：

<template>
<div class="gallery">
<div class="gallery__header">
<h2>{{ title }}</h2>
</div>
<div class="gallery__content">
<div class="gallery__grid">
<div v-for="(image, index) in images" :key="index" class="gallery__item">
<img :src="image.src" :alt="image.alt" class="gallery__image">
<div class="gallery__overlay">
<h3 class="gallery__title">{{ image.title }}</h3>
<p class="gallery__description">{{ image.description }}</p>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'Gallery',
props: {
title: {
type: String,
required: true
},
images: {
type: Array,
required: true
}
}
}
</script>

<style>
.gallery {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.gallery__header {
text-align: center;
margin-bottom: 20px;
}

.gallery__content {
display: flex;
justify-content: center;
}

.gallery__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}

.gallery__item {
position: relative;
overflow: hidden;
}

.gallery__image {
width: 100%;
height: auto;
transition: transform 0.3s ease-in-out;
}

.gallery__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
}

.gallery__item:hover .gallery__image {
transform: scale(1.1);
}

.gallery__item:hover .gallery__overlay {
transform: translateY(0);
}

.gallery__title {
margin: 0;
font-size: 1.2rem;
}

.gallery__description {
margin: 0;
font-size: 0.8rem;
}
</style>

请注意，这只是一个示例代码，您可以根据自己的需求进行修改和定制。