I have tried this now but with dromeas no success…
I would avoid generic selector names and img by itself, ideally use a unique selector beforehand. For example, you’re adding that transition to every image on the page.
Why isn’t it possible to that someone can provide a bric like the Image Bounce Effect.bex with interactivity…?
Hi @yellow
What you mean by that ? You also use dromeas and you tried different solutions and it doesent work? Did you try it on a new project ?
You could try asking someone to make a bespoke one for you and pay them?
Just saying……
When you dont need a caption - only a Image and a zoom effect try this …
- Use the div bric
- Inside the div insert a image
- Set a class “wrapper” Open the Class and set a width you like and use overflow = hidden
- click the image and set a link you like
- insert the little css snippet
#tom2 tried your suggestion but no success with Dormeas
Hi @yellow
could you implement one solution - rme or mine - and send a link ?
I can’t check it because I dont use dromeas …
tom
Ralph, I can’t get this thing to work right.
The animation works but the picture won’t show up.
I’m sure I have all the classes right but the picture isn’t at its place.
When I hover over the place where it should be the text comes up.
Bootsie, talán ez a segítségedre lesz. Én is sokáig gondolkoztam rajta hogy lehet megcsinálni. nekem sikerült így.
image_bounce effect.zip (1.3 MB)
1 Like
Bootsie, maybe this will help you. I also thought about how to do it for a long time. I did it that way.
1 Like
It certainly does. It’s perfect.
Thanks a lot buddy.
I wonder, why Ralphs doesn’t work.
I’m glad I could help 
This works great! I noticed the effect zoom towards the right. Anyway to have the zoom centered?
I think this is the Blocs default setting in the animate.min.css file for the zoomIn animation
Don’t forget there are 3 or more of these already in the forum if you search. All able with interactions & zoom where you can easily adjust the zoom speeds and intensity of the zoom & one that has an overlay option of a bric to add which I’m using as below.
Keep adding more by all means - but the ones you might want are already here.
@PeteSharp did 2 of them (thank you!) and one I used on my own person business website recently on a page I’m still working on for locations on my website.
As I’m getting a few conflicting issues with card designer I decided on using this instead & created a smaller button.
Please this page is a work in progress, and something I might not keep!
The “image bounce effect” typically refers to a visual animation or transition applied to images to create the illusion of bouncing or moving in response to user interaction or page load. This effect can add dynamism and engagement to websites or applications. Here are a few ways you can achieve an image bounce effect:
- CSS Animation: You can use CSS keyframe animations to create a bounce effect. Define keyframes that alter the position or scale of the image at different intervals, giving the impression of bouncing.
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.image {
animation: bounce 2s ease infinite;
}
In this example, the image will bounce up and down infinitely over a duration of 2 seconds.
- JavaScript Libraries: There are many JavaScript libraries, such as jQuery UI and GreenSock Animation Platform (GSAP), that provide built-in methods for creating animations, including bounce effects. These libraries offer more flexibility and control over the animation parameters.
$(".image").effect("bounce", { times: 3 }, 300);
This jQuery code will make the image bounce three times over a duration of 300 milliseconds.
- CSS Transition: You can also use CSS transitions to create a bounce effect when hovering over an image or when it’s loaded onto the page. By defining the transition properties, you can control how the image reacts to changes in its state.
.image {
transition: transform 0.3s ease-in-out;
}
.image:hover {
transform: translateY(-20px);
}
In this CSS example, the image will smoothly transition up by 20 pixels when hovered over.
These are just a few methods to achieve a bounce effect with images. Depending on your specific requirements and the level of interactivity you desire, you can choose the approach that best fits your needs.
1 Like