cyber/src/components/Tools_box.vue

<script setup>
import { ref } from 'vue';

const props = defineProps({
  tool: Object
});

const imageURL = (r1, r2) => {
  return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`;
};

const hover = ref(false);
</script>

<template>
  <div
      class="tool-box"
      @mouseover="hover = true"
      @mouseleave="hover = false"
  >
    <div class="image-container">
      <img :src="tool.image" :alt="tool.title" />
    </div>
    <div class="text"><h3>{{ tool.title }}</h3>
      <p>{{ tool.description }}</p></div>
    <div class="text-background">

    </div>
  </div>
</template>

<style scoped>
.tool-box {
  position: relative;
  width: 170px;
  height: 225px;
  border: cyan solid 1px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.theme-light .tool-box {
  border: #ffb74d solid 1px;
}

.tool-box:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-10px);
}
.image-container {
  width: 100%;
  height: 100%;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter 0.3s ease;
}

.text-background {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, black, transparent);
  color: white;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.text {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, black, transparent);
  color: white;
  text-align: center;
  box-sizing: border-box;
  z-index: 10;
}

.text h3 {
  margin: 0;
  font-size: 18px;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.text p {
  margin: 0;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.tool-box:hover .text-background {
  background: linear-gradient(to top, black 60%, transparent);
  transform: scaleY(5);
}

.tool-box:hover h3 {
  transform: translateY(-10px);
}

.tool-box:hover p {
  transform: translateY(-5px);
}

</style>