Kevin Powell - Community•3mo ago

Override overflow for specific elements

I can't seem to figure get the dollar sign to overlap. I would like overflow to stay clipping for the glows and other items, however I don't want the dollar sign to be affected. The problem is that I am using Vanilla Tilt. If you put it outside the tile it doesn't tilt with the tile. If you wrap the objects in an overhead parent using relative and such, it almost works, but now the glow effect no longer works. You can see the full website: https://awesome-roblox.vercel.app (full site isn't up to date with the latest push)

3 Replies

TheMasterBuilderOP•3mo ago

<script setup>
import { onMounted } from 'vue'
import VanillaTilt from 'vanilla-tilt'

onMounted(() => {
  const card = document.querySelectorAll('.card')
  if (card) {
    VanillaTilt.init(card, {
      glare: true,
      'max-glare': 0.15,
    })
  }
})
</script>

<script setup>
import { onMounted } from 'vue'
import VanillaTilt from 'vanilla-tilt'

onMounted(() => {
  const card = document.querySelectorAll('.card')
  if (card) {
    VanillaTilt.init(card, {
      glare: true,
      'max-glare': 0.15,
    })
  }
})
</script>

<template>
  <div class="card" data-tilt>
    <img id="dollar-symbol" src="/src/assets/Dollar_Sign.png" alt="Dollar_Symbol"/>
  </div>
</template>

<template>
  <div class="card" data-tilt>
    <img id="dollar-symbol" src="/src/assets/Dollar_Sign.png" alt="Dollar_Symbol"/>
  </div>
</template>

<style scoped>
.card {
  position: relative;
  min-width: 155px;
  min-height: 155px;
  filter: brightness(100%);
  background-color: rgb(47, 47, 47, 0.9);
  border-radius: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  scale: 100%;
  z-index: 0;
}

.card:active {
  scale: 80%;
  transition: 0.2s ease;
}

.card::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(var(--glow), transparent, transparent);
  opacity: 0;
  transition:
    0.5s,
    top 0s,
    left 0s;
  z-index: -2;
}

.card:hover::before {
  opacity: 1;
  filter: contrast(130%) saturate(100%);
}

.card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 18px;
  background-image: url('/src/assets/noFilter_58.webp');
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
  filter: opacity(85%);
  z-index: -1;
  transition: all 0.5s ease;
}
.card:hover::after {
  filter: opacity(60%) brightness(95%);
  transition: 0.5s;
}

#dollar-symbol {
  position: inherit;
  border: 1px solid red;
  max-width: 35px;
  margin: -50px;
  background-image: url('/src/assets/Dollar_Sign.png');
  z-index: 5;
}
</style>

<style scoped>
.card {
  position: relative;
  min-width: 155px;
  min-height: 155px;
  filter: brightness(100%);
  background-color: rgb(47, 47, 47, 0.9);
  border-radius: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  scale: 100%;
  z-index: 0;
}

.card:active {
  scale: 80%;
  transition: 0.2s ease;
}

.card::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(var(--glow), transparent, transparent);
  opacity: 0;
  transition:
    0.5s,
    top 0s,
    left 0s;
  z-index: -2;
}

.card:hover::before {
  opacity: 1;
  filter: contrast(130%) saturate(100%);
}

.card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 18px;
  background-image: url('/src/assets/noFilter_58.webp');
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
  filter: opacity(85%);
  z-index: -1;
  transition: all 0.5s ease;
}
.card:hover::after {
  filter: opacity(60%) brightness(95%);
  transition: 0.5s;
}

#dollar-symbol {
  position: inherit;
  border: 1px solid red;
  max-width: 35px;
  margin: -50px;
  background-image: url('/src/assets/Dollar_Sign.png');
  z-index: 5;
}
</style>

TheMasterBuilderOP•3mo ago

TheMasterBuilderOP•3mo ago

the glow effect is a purple light btw

Gaming

Programming

Override overflow for specific elements

Did you find this page helpful?