Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ Comments

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋

Posts Comments

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

Wow, that's quite cool. Thanks! I'll look into that

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

how would I make that

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

wow, how'd I start with the radial background? xD

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

should I make it a different way? so it's less chunky and all?

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

yeah, I specify in the transition the width and height, so it should go back to default in a transition

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

it just disappears

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

changed it to ease-in-out but still the same

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

I use the transition rule

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

or is there a different approach ?

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 11/14/2023 in #front-end

Border hover animation reversing

How could I make this animation smoother and reverse the animation when I hover off the element?

26 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 10/5/2023 in #front-end

Disable css filter effects on pseudo elements

what is the difference with • transform: scale(1.3); • scale: 1.3;

13 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 10/5/2023 in #front-end

Disable css filter effects on pseudo elements

thanks for the help!

13 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 10/5/2023 in #front-end

Disable css filter effects on pseudo elements

also, about the content, in the divi module i have the remaining content rule, I made it like this so that when we need to change that content (every week we do that), it's easier to find and change.

13 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 10/5/2023 in #front-end

Disable css filter effects on pseudo elements

It's solved! Same link for example ( it might be deleted tomorrow ) I use this css now:

<style>
.col{
  overflow:hidden;
}
.events img{
  aspect-ratio: 2 / 1.5;
  height: auto;
  transition: 300ms;
}
.events:hover img{
  transform: scale(1.3);
  filter: brightness(140%) contrast(200%) blur(1px);
}
.events::before,
.events::after {
    white-space: pre;
    position: absolute;
    padding: 1.3vw;
  z-index: 1;
    line-height: 1em;
  pointer-events: none;
}
.events::before{
  text-transform: uppercase;
  inset: 0px;
  font-size: 1.5vw;
  background-image: url("https://www.macqueen.be/wp-content/uploads/2022/06/Background-blue-white_-.png");
}
.events::after{
  content: "Meer foto's";
  bottom: 0px;
  right: 0px;
  font-size: 1.1vw;
}
</style>

<style>
.col{
  overflow:hidden;
}
.events img{
  aspect-ratio: 2 / 1.5;
  height: auto;
  transition: 300ms;
}
.events:hover img{
  transform: scale(1.3);
  filter: brightness(140%) contrast(200%) blur(1px);
}
.events::before,
.events::after {
    white-space: pre;
    position: absolute;
    padding: 1.3vw;
  z-index: 1;
    line-height: 1em;
  pointer-events: none;
}
.events::before{
  text-transform: uppercase;
  inset: 0px;
  font-size: 1.5vw;
  background-image: url("https://www.macqueen.be/wp-content/uploads/2022/06/Background-blue-white_-.png");
}
.events::after{
  content: "Meer foto's";
  bottom: 0px;
  right: 0px;
  font-size: 1.1vw;
}
</style>

13 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 10/5/2023 in #front-end

Disable css filter effects on pseudo elements

thank you

13 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 10/5/2023 in #front-end

Disable css filter effects on pseudo elements

I see, never thought of that!

13 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 10/5/2023 in #front-end

Disable css filter effects on pseudo elements

Page i'm working on: https://www.macqueen.be/home-testing/ My code so far:

<style>
.events{
  aspect-ratio: 2 / 1.5;
  height: auto;
  transition: 300ms !important;
    background-size: 130%;
}
.events:hover{
  background-size: 170%;
} 
.events::before,
.events::after {
    white-space: pre;
    position: absolute;
    padding: 20px;
}
.events::before{
  text-transform: uppercase;
  inset: 0px;
  font-size: 1.5vw;
  line-height: 1.2em;
  background-image: url("https://www.macqueen.be/wp-content/uploads/2022/06/Background-blue-white_-.png");
}
.events::after{
  content: "Meer foto's";
  bottom: 0px;
  right: 0px;
  font-size: 1.1vw;
}
</style>

<style>
.events{
  aspect-ratio: 2 / 1.5;
  height: auto;
  transition: 300ms !important;
    background-size: 130%;
}
.events:hover{
  background-size: 170%;
} 
.events::before,
.events::after {
    white-space: pre;
    position: absolute;
    padding: 20px;
}
.events::before{
  text-transform: uppercase;
  inset: 0px;
  font-size: 1.5vw;
  line-height: 1.2em;
  background-image: url("https://www.macqueen.be/wp-content/uploads/2022/06/Background-blue-white_-.png");
}
.events::after{
  content: "Meer foto's";
  bottom: 0px;
  right: 0px;
  font-size: 1.1vw;
}
</style>

13 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 6/18/2023 in #front-end

How to make a Scroll snap align effect

I've also heard that it is UX based bad overall so maybe I won't implement it afterall. But at the end of the day, 've learned something new 🙂

7 replies

KPCKevin Powell - Community

•Created by Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋ on 4/25/2023 in #front-end

Object-fit:cover; reduces quality of images, alternative?

I see, thanks for the input, I'll try to use higher quality images

3 replies

Gaming

Programming