A question i still am looking for an answer

[MARCELO]

Sometime ago i asked a question in this forum, but noone could give me an answer. I thought that developing my skills i could find it by myself, but i still can t identify - when i m studying a the developers tool (i m not sure that s the name in english, but i m talking about the website html structure) - what i m looking for. 

It s this photo effect in websites like these:

https://wedy.com/lauraemoabe

Is there a simple code i can add to have this effect? Do i have to buy a plugin or something and install it?

By the way, this is such a nice effect that some awarded websites (best sites in the world) uses this kind of effect!

THANKS.

Edited March 1, 2018 by MARCELO

[dsonesuk]

Because you supply invalid html code, you have been told this numerous times, even in another recent posting it is still wrong and the impression is you don't want to learn you just want us to do it for you, and you won't learn anything by just copying and pasting our solutions.

https://validator.w3.org/

Will give you detailed instructions on what is wrong, with a warning 'you have an closing tag with no opening tag to match' means you misplaced or missing a tag that is breaking the html structure.

[MARCELO]

No, that s not my intention. In fact, the website i m building is much bigger than the support being offered here. But yes there are something i m starting from 0 or close to it. 

I think your answer is related to the other topic. 

By the way, you were the one who told me to search it by myself ( the effect in this topic ). And i have really tried to identify. Otherwise, i wouldn t be insisting in this question.

That s a interesting link. 

Thanks.

[Ingolme]

You must make your HTML valid before you can begin to solve any other problems. You cannot build a website on an unstable foundation.

You need to learn how to break down problems into simpler components. Here are some of the properties of the feature you want to create:

1. It's animated. Therefore you have to use the CSS animation property. 

2. It does not affect the positioning of any other elements on the page, therefore it's position will have to be absolute or perhaps fixed, depending on how you want it to behave. 

3. It's behind everything else, so it will need a negative z-index.

Each of these things is something easy to create on their own, building the whole thing is just a matter of building a whole lot of small easy things.

I haven't listed all the properties, it's up to you to define your objective in as much detail as possible before starting to write any code.

[MARCELO]

I m trying to write some code....just to start... but  how can i develop the zoomIN and zoomOUT specifications? It seems to me there s no property here related to this kind moviment. 

 

Edited March 8, 2018 by MARCELO

[Ingolme]

There is no zoom feature in CSS, you have to create it yourself based on your understanding what zooming actually is.

What does it mean to "zoom in" or "zoom out" on something?

When you zoom in, what you actually do is make the object larger. In the same way, when you zoom out you are making the object smaller. This means that to make something "zoom" all you have to do is change its size. In CSS use can use the transform property to change the size of an object, you can also use the width and height properties. All of these properties can be used with CSS animation.

[dsonesuk]

The site you original linked to has div elements with background images within an overflow: hidden parent element. it randomly selects one of these display: none; hidden div elements and apply a class 'active' to show using display: block, and at same time adds another class 'home-cover' which initiates the animation, which expands the active div and its background image from transform:scale(1)   to transform:scale(1.2). To centre this animation, transform-origin: center center 0; is used to give effect of zooming from center and not from left of the screen.

So

1) create outer parent element, that uses overflow: hidden; and has height set.

2) create div elements that have style background-images of different images, and background-size: of 'cover', (might want to concentrate on one first to get zoom effect working)

3) create 'active' class to reverse style from display: none; to display: block;

4) create animation class to initiate keyframes which change scale from 1 to 1.2 over approx 8 sec, this class should have transform-origin: set.

5) Use JavaScript to randomize each 'active' and animation class for one div out of the group, making sure you clearing these specific classes beforehand.