Streaming live at 10am (PST)

How to make gallery


#1

I tried to make gallery but there is problems to fit the picture to the box. Here is picture:

As you can see the pictures doesnt fit the box and black boxes dimensions moves when you put the picture there. Is there any posibilities to add pictures to the box that they don`t change the box dimensions?

And the other question is how to make new black boxes step by step?

Im newbie and don`t know how to make it.

Thanks for your answers!!!

https://webflow.com/design/hannu-rainamos-five-star-project


#2

Please provide a share link. The one provided doesn’t work.

From a quick look, you will likely want to set up divs and then set the backgrounds of the divs. Then you can play around with how you want that image to display and it will crop at the div borders.


#4

I should have provided this - please provide a read-only site link.

Thanks!


#5

https://preview.webflow.com/preview/hannu-rainamos-five-star-project?preview=fd052a1729222d22275c82cf278d854b

Yes now I got it the right place!!! Thanks!

And I have two another questions… How to make more those black boxes ?

And how to change this gallery hover icon place? It moved when I tried to do pictures to the boxes.

Thanks!


#6

It looks like you figured out how to size the images in the divs. You can set the div sizes (to same ratio) and then set the picture to 100% width to fill the space.

To make more gallery divs, simply go to the Navigator view (right side, navigator) select the div and copy/paste more div sections.

For the hover icon - you would need to move that inside the div you want it to be over - from there you would set the position of the element inside that div. Again, you could use the navigator panel to drag the icon into the div you want it to be in.


#7

Thanks for the reply Joe!!

I can`t copy paste the hover icon to two bottom images because they goes to the top of the gallery… Weird.

And if I go to the gallery and put the cursor on the picture the hover icon shows but the zoom effect not. What can I do?

Aaaand how can I divide this one box to two separete boxes like the upper ones ?

And many thanks for your reply!!!


#8

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.