I need to recreate this page with my own images

Design help General
1

I need to recreate this page with my own images. http://berkeleypr.co.uk/stories/

I’m having trouble getting the images to stick to the edges of the page. I can screen shot and resize the images but the edit bar appears and doesn’t give me the view of the whole page. I hope this makes sense.

I just need to add images so they fit perfectly. Can anyone help?

Public link: https://webflow.com/design/prestige-events?preview=48fd40a2fe6fbbaa1110ae0112aeb1f5

Use the Prestige Events Magazine page to start.

Thanks

Sam

2

I’d suggest using webflow columns and have a fixed height for them. Then simply use css background as an image. The scale of the image in background can be changed using background-size: 110%; css feature. Simply add it in custom code for hovered image or use a javascript:

$('.imagethatscales').hover(function() {
	$(this).animate({
		'background-size', '110%'
	});
}, function() {
	$(this).animate({
		'background-size', '100%'
	});
});

I haven’t tested this code, so ping me if it doesn’t work as you wish.

1 Like
3

Working on that now. Thanks for the reply.

1 Like
4

How do I link the background of a column?

5

It will nice Bartosz if we can achieve zoom animation without page load like this: AWearness - Andy Wolf Eyewear
We can natively create zoom animation on hover in webflow, but not page load.

6

Sounds like you are pretty new to webflow. I recommend watching all the tutorial videos from the link in the upper right of the forums. Good luck

7

It will be nice you point me to what am missing. WF doesn’t allow animation of background image on page load like a zoom as in the reference. WF can do hover zoom animation, that is not what am looking for.

8

I’ve put this on my list for video tutorial series I’m making. Keep an eye on forum, or subscribe to our list: https://www.barts.work to get instant info regarding our website and the course I’m making.

Here is the solution to your problems:

http://bklearn.webflow.com/zoom-animation

<style>
    @-webkit-keyframes zoomanimation {
        0% {
            background-size: 100%;
        }
        50% {
            background-size: 150%;
        }
        100% {
            background-size: 100%;
        }
    }
    @-moz-keyframes zoomanimation {
        0% {
            background-size: 100%;
        }
        50% {
            background-size: 150%;
        }
        100% {
            background-size: 100%;
        }
    }
    @-ms-keyframes zoomanimation {
        0% {
            background-size: 100%;
        }
        50% {
            background-size: 150%;
        }
        100% {
            background-size: 100%;
        }
    }
    @keyframes zoomanimation {
        0% {
            background-size: 100%;
        }
        50% {
            background-size: 150%;
        }
        100% {
            background-size: 100%;
        }
    }

    .zoom-section {
        -webkit-animation: zoomanimation 30s ease-in-out infinite;
        -moz-animation: zoomanimation 30s ease-in-out infinite;
        -ms-animation: zoomanimation 30s ease-in-out infinite;
        animation:  zoomanimation 30s ease-in-out infinite;
    }
</style>
1 Like
9

Much much appreciation, Bartosz. Only if WF can start adding animation to the next round of features.

10

Most animations are available via Interactions. More advanced require scripting. It’s easy to follow, trust me :) I’ve learned most of javascript and css tricks thanks to challenges here on forum. One thing: every script I create starts from a piece of paper and pencil. Every.

As I said - I’ll try to cover CSS Animations topic on my course.