For Mobile
First and foremost this type of thing obviously does not work on anything without a mouse. Or at least as far as my knowledge and abilities go I am unable to recreate it for mobile. Creating a mobile version within Framer I would expect would need to be triggered by a swipe if it were done. Again I dont know how to do that but here is what the mobile version of this section looks like.
Probably better then the fancy hover thing.
How I made it
First I created a card component out of the images and put in a tag and title. The width and height are set to fixed for both and the image is fixed at 580x580 for both variants.
You can mess around with the elements in the card to have them animate as well up down right left etc but anyways moving on. I create another component (not ideal, or at least I dont like it) which is basically the entire section of the site to facilitate the animation when hovering where 1 card gets larger in width and the other smaller.
In my section I have 5 photos being shown and so I have to create 5 variants of this component with each new one having a different card as the hovered state. I then go back to the first variant shown above and link the following four smaller cards to their relevant variant. You also need to setup the link for when you stop hovering a variant.
Conclusion
That's it. That is how I made that section in my portfolio site. Here is the inspiration I used to create this section.
ALL RIGHTS RESERVED