Image bounce effect...?

There is an image bounce effect bric here:

Is there a possibility to use it if you want to have an Interaction with it?

Really no bounce effect with interaction in Blocs?

Lots of examples on the forum already that give you the basic concept for creating a zoom on hover with an image. :smiley:

2 Likes

There really is !

as @PeteSharp has said - a few options to download what people have took their time and we are very grateful for them uploading for our use.

I use the forum as my live manual! and extra office staff !!! I type in what I am looking for and see what people have done in the past to solve things and what you are looking for is quickly solved.

There are a few - Good luck !

1 Like

There are a lot of brics… but why nobody can do a bric with a bounce effect and interaction?

Probably because it’s really easy to do and adjust with the code, but its been done for us already on the forum?

… and where is the possible code here to do it… seems not as easy as it should. there is a bounce bric but with no interaction here… why it has someone made such a bric when a possible code is easy…?

Hi @yellow - sorry, you seem very confused and I am trying to help.

if you search in the forum - there are some files people have uploaded to download that have 100% what you want. I am on my mobile now, so just typing some help here for you. Search and there are 2 or more.

Look at the code editor and there are numbers which you can adjust for ease of " bounce " as you call it and how intense the image will move in and speed etc.

Really easy.

have fun …and thanks :astonished:

1 Like

@yellow

If I understand, I think what you mean is when using the “Image Bounce Effect” bex file, it has no interaction menu when clicking the image. Is this correct? What interaction are you wanting exactly?

@johnandrew

Yes the Image Bounce Effect bex file has no interaction. I like to have navigate to URL interaction.

Download the bloc/bric that ive said to find (a few times) and on the right hand side set the image to go to a URL.

I did this the other week for a clients profile where they wanted his image to zoom on hover and click to go to his profile page.

@ [AdieJAM]
If the Bounce Effect bric has no Interaction you can no set it… so there should be this/such a bric with interaction.

Hi @yellow - can you send me the link to the brief and possible a video to the effect you are looking for?

Did you find the bric in the searches myself & Pete mentioned?

I’m sure what you are looking for very easy

I’m looking for this effect posted here:

unfortunately the bric has no interaction…

Seems to be very difficult if nobody can provide a solution for such an effect with interactivity in blocs

It’s not difficult at all. It takes a few minutes to make, once you learn how.

The bric works as it was intended. Just not want you want. Custom brics don’t work with the inbuilt interactions they have to be coded into the bric as options. The bric is also a basic sample bric from the bric builder but with some CSS added, the same CSS given in the thread the bric was offered on. You can look at the bric HTML to see how it works.

Everything is there for you try. I think people are waiting for you to show some effort on your part. It’s all about learning.

1 Like

Hey, do you looking for an interaction like in these template Home | Auto Service Template ?

You can do this with 3 div-container. This is the structure:

3 Likes

Nice work as usual Ralf (@RME )

1 Like

I tried it with a dromeas project - no success…

the first div needs a custom class:

the second div is for the image and has this custom class:


Important are these options:

and the third div is for the buttom and the h3-text:

for the animation you need a css:

.overlay {
opacity: 0;
transition: 0.7s ease-in-out;
}
.overlay h3 {
margin-top: 30px;
transition: 0.8s ease-in-out;
}
.img {
transition: 1s ease-in-out;
}
.wrapper:hover .overlay {
opacity: 1;
transition: 0.7s ease-in-out;
}
.wrapper:hover .img {
background-size: 104% auto;
transition: 1s ease-in-out;
}
.wrapper:hover .overlay h3{
margin-top: -10px;
transition: 0.8s ease-in-out;
}

Maybe it helps you.

1 Like