Bounce effect on mouse over without changing the size of the image?


#1

Hi, I’d like to make the same effect as what I have seen on this website made with Blocs.
(zoom/bounce effect on the images without changing the size of it)

https://www.stick-company.com

Thank you !


#2

This is a very well website created by @RME. Perhaps he will give you a tip.


#3

Hi @RME … how you doing this that the navbar or header is transparent ? Is it possible that you can give me a Tipp ?
Thanks Tom


#4

hey @tom2 you can do this with the custom class named .sticky-nav.sticky. Than you can make the navbar transparent


#5

hey @chrishsl i did made a bric with the following code:

.item { position: relative; overflow: hidden; width: 403px; height:320px; } .item img { max-width: 100%; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; } .item:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }

May be you can use the code directly in the head code.


#6

Thank you @RME ! I really appreciate !
I havent made a bric yet, could you just do a screenshot of the bric as I am not sure how to write the code.
Thank you !

Chris


#7

Hey Ralf, is it possible for you to send me the bric as I can’t manage to make it work.


#8

yes i can send you the bric. but im not a professional programmer. im not sure, the bric work always fine.


#9

thank you ! let me know if you need my email or if you want to send it in this topic.


#10

here is my bric. no guarantee that it works!

have fun.

Image Bounce Effect.bex (45.7 KB)


#11

Thanks a lot Ralf for sharing, and it does work ! :slight_smile:


#12

But it does - Perfectly.
Vielen Dank, danach habe ich lange gesucht.

BTW - Your “Tierschutzverein” Site is one of the best Websites I’ve seen. Just great.