Help with CSS to insert a gradient hover animation

Ask the community
1

Hello!

I am trying to add a custom animation through CSS so that when the user hovers over a link button on my page, a gradient animation will show. I went into dev mode, clicked on the element i’m trying to apply the code to, selected the option of onMousein() and then pasted my code in but it’s not actually doing anything. This is the CSS i’m trying to input:

body {
font-family: ‘Segoe UI’, ‘San Francisco’, Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.c-preview {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #c8bcdd 50%, #6562ac 75%, #c8bcdd 100%); /* FF3.6-15 /
background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 25%,#c8bcdd 50%,#6562ac 75%,#c8bcdd 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(135deg, #000000 0%,#000000 25%,#c8bcdd 50%,#6562ac 75%,#c8bcdd 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: 100vh;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;

&__img {
position: absolute;
left: 0;
top: 0;
background: #000 url() no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}

&__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}

&:hover {
background-position: 100% 100%;

&__title { 
  text-shadow: 0 0 20px rgba(0,0,0,1); 
}

}
}

Is there anyone who can help me or give me some guidance on what I am doing wrong? Maybe a step I’m not doing?

Thank you!!!

2

Hey @harriette-regina , I’m not a code person, but I believe a certain solution would be to use the iFrame component to embed the code in the website. I noticed your code written in SCSS and not regular CSS so I tried to guess my way around and rewrite the code. This is the code you will copy and paste into the Iframe as I show in the video: https://www.screencast.com/t/mzRoKw5cRsXr
Of course you will also need to add functionality to the code (this would be with a tag: