# Interactions ripple effect hover?
**URL:** https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554
**Category:** Beginners
**Created:** [August 19, 2021, 12:56am UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554 "2021-08-19T00:56:59Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 19, 2021, 12:56am UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/1 "2021-08-19T00:56:59Z")
Can I make a ripple effect hover using PG interactions or do I need to find code on a site like codepen?
And will interactions interfere with Bootstrap 5 theme page?
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 19, 2021, 9:59am UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/2 "2021-08-19T09:59:53Z")
Hi @kat,
People can name their animation/effect pretty much anything, so without an example of this “ripple effect” I can’t really help.
As to your second question - Bootstrap and Interactions get along quite well!
Cheers,
Bob
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 19, 2021, 8:09pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/3 "2021-08-19T20:09:29Z")
Where do I find the code & how to do with interactions for [Credit Card Rotation](https://pinegrow.com/docs/interactions/examples/RotatingCard/index.html)?
That should give me a good idea on how to do what I want.
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 19, 2021, 8:33pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/4 "2021-08-19T20:33:40Z")
Hi @kat,
You can open that page by using the “Open URL” on the start page. It is best/easiest to have a save folder created first. Once the page is open save as a project, then activate Interactions. Some of the images will be missing, but you will be able to see the interaction animations.
Cheers,
Bob
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 20, 2021, 5:50pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/5 "2021-08-20T17:50:34Z")
1. This is the ripple effect I want. Do I just apply .ripple?
[Bootstrap Images - examples & tutorial](https://mdbootstrap.com/docs/standard/content-styles/images/#)!
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_-
2. For the rotating card the SVG Library opened and I added Interactions Blueprints, OK?
Any way to see how this works in PG’s Interactions. All I see is the code in index.html?
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 20, 2021, 8:27pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/6 "2021-08-20T20:27:52Z")
Hi @kat,
That ripple effect is part of the paid library that MDB has. I have to put a little thought into how it can be done using interactions.
For the card you need to have JavaScript turned on. It is the JS icon at the top of the Page View.
Cheers,
Bob
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 21, 2021, 1:08am UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/7 "2021-08-21T01:08:04Z")
javascript on, works on the card.
[https://codepen.io/kshitij/pen/wdxPWa](https://codepen.io/kshitij/pen/wdxPWa) is a ripple but I want it radiating from the center. I could just use the code, but would prefer to learn how to do this with PG interactions.
---
### Author:  [@abirana](https://forum.pinegrow.com/u/abirana)
#### Post date: [August 21, 2021, 5:51pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/8 "2021-08-21T17:51:32Z")
You can easily achieve that, check the CodePen implementation yourself and you can see that it is using pseudo element like :after. In PG you can add a span element and position on the center and add interaction for scale property.
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 22, 2021, 6:07pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/9 "2021-08-22T18:07:29Z")
Not working yet. Doesn’t seem to be attached to BtnHover.css. [New page](https://mcgraphics.us/RotatingCard_Interactions/indexButtons.html).
---
### Author:  [@abirana](https://forum.pinegrow.com/u/abirana)
#### Post date: [August 22, 2021, 8:21pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/10 "2021-08-22T20:21:16Z")
That Codepen project is written in SASS, you placed that in your CSS file so it won’t work.
In Codepen click on **View Compiled CSS** and then you can see plain CSS code, copy/paste that and it should work.
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 22, 2021, 10:27pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/11 "2021-08-22T22:27:18Z")
Work perfectly now, Abirana, except for my bg and text colors edits.
Any way to edit the entire ripple effect in PG interactions?
If not I’ll just fiddle with the css and see what happens ; )
---
### Author:  [@abirana](https://forum.pinegrow.com/u/abirana)
#### Post date: [August 26, 2021, 5:11pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/12 "2021-08-26T17:11:44Z")
Oh I forgot to reply
As about doing it with PG Interactions, you can do that. As I’ve already mentioned in my earlier reply, that example is done using pseudo elements. But with PG Interactions you will have to add an extra element and apply the effect to that element.
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 26, 2021, 8:36pm UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/13 "2021-08-26T20:36:14Z")
What element would I add where?
What does translate mean?
`.card:before, .card:after { content: ""; background: #ffab2e; width: calc( 300px * 2); height: calc( 300px * 2 ); border-radius: 50%; position: absolute; top: 0px; left: 0px; transform: translate(-50%, -50%) scale(0); transition: all 0.5s cubic-bezier(0, 1.04, 1, 0.01); } .card:after { bottom: 0px; left: 0px; background: #ffa014; transform: translate(0, 0) scale(0); } .card:hover:before { transition: all 1s ease-in-out; transform: translate(-50%, -50%) scale(3); } .card:hover:after { transition: all 1s ease-in-out; transform: translate(-50%, -50%) scale(2); }`
---
### Author:  [@abirana](https://forum.pinegrow.com/u/abirana)
#### Post date: [August 27, 2021, 6:29am UTC](https://forum.pinegrow.com/t/interactions-ripple-effect-hover/5554/14 "2021-08-27T06:29:55Z")
It will be little hard to explain everything, so I’ve made an example myself. Please check and see how I’ve done it. I used the same code and did it with PG, I only did one of the ripple; you can do second one yourself.
> **[Hover Ripple Effect.zip](https://drive.google.com/file/d/1VvnyFp03-J9rq3sccpEtccJw5Nr38MV5/view?usp=sharing)**
>
> Google Drive file.
Another thing, it is recommended to have a good hands at-least on CSS to recreate/edit such effects. Better you know better it is for you.
Note: For hover effect in PG, you should have one interaction when hovering in and another for hovering out. So it is recommend to use CSS for what is achievable with CSS. You should use PG Interactions for complex implementation which is not possible or easy with CSS.