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?
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
1 Like
Where do I find the code & how to do with interactions for Credit Card Rotation?
That should give me a good idea on how to do what I want.
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
1 Like
- This is the ripple effect I want. Do I just apply .ripple?
Bootstrap Images - examples & tutorial!
____________________________- - 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?
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
1 Like
javascript on, works on the card.
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.
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.
1 Like
Not working yet. Doesn’t seem to be attached to BtnHover.css. New page.
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.
1 Like
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 ; )
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.
1 Like
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); }
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.
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.
2 Likes