Simple overlay thumbnail


i’ve been trying to make an overlay thumbnail for my homepage, but it doesn’t work…
I don’t understand how to do it. I put my image, then into class editor, I choose my overlay picture on the “over”, but then nothing happen??

I try 2 different methods following video tutorials, but it didn’t work either.
Either i have weird spaces adding between thumbnails or the image inside the thumbnail is not the correct size, when it is inside the editor…

I don’t want to pay 15€ for the overlay bric, I think it’s too expensive for something that shoud already be included in the program…

I’d like to have a title also on the thumbnail, but that seems to complicate things…i did try the button method thing, but didn’t work well… i’m desperate! :frowning:

The easiest way is to use the button option. Just create a button the size you want (presumably the image size). Create two images - one for the normal state and one for the hover state. The hover state will be the same image with an overlay and any text you may want to add. Create the images in any image editing or graphics application. Create a custom class for the button and use the images as the normal state and hover state. If your images are a different size than the button, you will have to set the width in the class editor to 100% and make sure the the options are set to centre-centre and no repeat. The button label can be simply removed by deleting the text in the label.

This is how you should prepare your normal image:

And this is how you would prepare your over image:

It’s often easier to add the button and make it full width. This will make the button the same width as the column it’s placed in. Create the custom class, add the two images, set the images to 100% width. Close the class editor. Select the button on the page and drag the bottom handle of the button until the full height of the image becomes visible. Remove the button label.

You only have to do this for your computer breakpoint. Hover effects will not be seen on touchscreen devices or mobiles, so you will have to find another way to deal with those devices.

I’ve been trying to do that, but i’m building a home with a grid of thumbnails, something like this : and the button dosen’t want to keep the side of the image grid…or bee aligned properly.

I’m loosing my mind, this program is bulshit or what!?
why in my editor everything is alined and in preview it is not!!!???
nothing is ever alined when i try to make a grid. And adding overlay thumbnails to them on top of that is mission impossible!

it’s really impossible to make a perfect grid

The problem you are experiencing is that Blocs doesn’t really know how you want your images arranged in relation to their aspect ratio. Essentially, to get an accurate grid, you must do some initial work in your image editor to ensure that your images will all align correctly when pieced together. I’ve attached an example blocs file so you can see how this works. The file also contains step by step instructions.

Here is a screenshot of the final effect:

Of course, this layout will distort on other breakpoints unless you make some adjustments on each breakpoint. However, As I said in my previous post, the hover effect isn’t going to work on Tablets and Smartphones, so it would be easier to make your hover effect grid available on the desktop version of your site only and create a more simple image grid on your other breakpoints. This means you can use images instead of buttons - which should be a whole lot simpler.

imageButtons.bloc (1.9 MB)

1 Like

thanks for this.
so i have to get a specific size for all my images? like yours? or i can change de size?
it’s a bit shrinked here. or the thing to do is prepare all thumbnails in photoshop and make sure they’re all the same height? that’s what’s important?

Got it one! The aspect ratio can be whatever you want, but the image heights have to be the same and the widths have to fit within the columns of your grid. Photoshop is ideal for doing this bit of prep work, but it really is worth the effort. If you look at the sample blocs file, you will see that I kept each row in its own bloc. This will allow you to duplicate blocs with the same columns structure and move them up or down the page to create your final grid. Be patient and I’m sure you’ll get to grips with it.

I changed the width projet size to 1500px instead of 1140
I have this result, i don’t understand why the same is bigger in preview. it’s often like that, in preview it’s different than in editing

Also in wich button class do i go, to set up the overlay thumbnails?

Download the blocs project file in my post above. Open it in blocs and then select one of the buttons. You will see over on the right of the screen there are two classes shown as below:

Screenshot 2020-05-11 at 18.24.05

Click on the one named button-1 to see the settings for the button. (ignore the other class - that was created by blocs itself). In the paintbrush tab, you will see where the image is placed and the size and positioning options.

In the above screenshot, you can see the settings for the normal button state. If you select the hover state, you will see exactly the same options. This is where you would set your hover image.

ok so I only go into button-1
i don’t touch the btn-padding?

No - don’t touch that one - Blocs created that when I adjusted the height of the button.

doesn’t work again…i can never get the correct size in preview. thumnail is smaller
and i put the correction resolution of the image that was setup in the collumn :frowning:
and if you look at the image below, it’s not aligned…same height though
and it’s aligned in editing mode…i don’t understand…my program is not working well or it’ total nonsenses to me

maybe you can send me your blocs file - make sure to embed the assets before saving

OK i’ll prepare that, thanks

Hi! here’s my project
it’s just the home page, that i remade from the project you sent me
There’s a note file to show how it should be and the ref website i put here on a previous message.

When i did my grid like yours with just images, everything is aligned perfectly. but when i upload my button images, in the classes, even though i set up the correct size in the property, all images are smaller, and not aligned…that i don’t understand.
maybe my images don’t have the proper size for this type of grid button? i’m completly lost…
the animated images are not button, it’s just for show

Ok, I see the issue in your project file. The problem is that your images are not sized in proportion to each other. so, let’s start by understanding the grid structure of the blocs page.

You have set the width of your page to 1400 px. This is divided into 12 GRID columns. When you place content on the page you create STRUCTURAL columns that span a specific number of GRID columns. For example. If you add a two column STRUCTURE block, each of those STRUCTURAL columns will span six GRID columns. You can view the grid columns by holding down the shift key while you are viewing your blocs page.

When it comes to laying out a grid of mixed size images, you have to ensure that your image sizes fit the width of the STRUCTURAL columns you place them in. If you don’t, the images will not fit if they are smaller than the structural column width. So, if you place a 1200 px width image into a full width STRUCTURAL column, the image will not stretch to fit the space, it simply places it in the centre of the structural column - leaving white space on either side.

In you particular project, you have a common feature which really dictates all the sizes of the other elements. That feature is your SQUARE images. Your square Images (the GIFS) are 400 x 400 px The nearest number of grid columns that you can place this image in is 4 (one third of the page width). This will reduce the size of the displayed image to 378 x 378 px. It also sets the benchmark height for all other images on the page. All you then have to do is ensure that your wider images will fit the width of the remaining space adjacent to the square image.

Given that the square image is occupying 4 GRID columns, this leaves 8 GRID columns for the adjacent image. The remaining content width (on your page) of 8 GRID columns is 785 px. Therefore, your adjacent image must be 785 x 378 px. When this image is placed next to your square image, it will be perfectly aligned with a standard gutter space between the images.

So, the best starting point is to lay out some STRUCTURE blocs on your page. The first bloc can be a two column bloc, the second bloc a single column bloc, the third, another 2 column bloc and so on.

On your 2 column structure blocs, select either the left or right column from the tree structure at the left side of the screen and adjust the width to 4 grid columns. Then select the other column and set its width to 8 columns. These adjustments are made in the appearance section of the properties panel on the right of your screen See Image below:

In your image editor, create some images that will fit into these columns. For the 8 column width columns, your images need to be 785 x 378 px, Your square images will need to be 378 x 378 px and your full width images will need to be 1183 x 378 px. It doesn’t matter if your images are to be displayed in an image bric, or used as normal and over images in full width buttons. If you size them correctly, they will all align perfectly in your grid structure.

Although I’ve given you the exact CSS dimension of the image, they can be larger, but the width and height must be in proportion. The best way to do this is to simply double the width and height of the images so they appear crisper on high resolution displays, you could even triple the dimensions if you wanted to. The thing is that Blocs will reduce the display size accordingly based on the width of the columns you place everything in.

As a final point, if the horizontal gutters are not to your liking, just use the margin options to adjust the amount of white space between the blocs.


That’s a fantastic explanation @hendon52, great stuff.
Image sizes on-the-fly is one of the main things I miss after jumping ship from Muse, where you could import an image and then adjust the ‘frame’ to crop to the size you wanted.

@TrevReav Thanks for your comment. I too converted to Blocs from a background of Muse. Before that I used Dreamweaver. The thing I noticed about Adobe products is that they were all built around graphic design rather than web design. I guess they were always appealing to their core users which tended to be graphic designers.

Whilst I liked the flexibility of a virtually free-format design tool, I soon realised that designing for the web required a more disciplined approach, especially when mobiles and tablets came on the scene, along with the advent of responsive design - all the normal rules of graphic design went out the window.

In many respects I’m happy that Adobe let us down by discontinuing development of Muse. It forced me to seek an alternative and Blocs fitted the bill perfectly. I like its discipline and the fact that we are forced into designing for the web, rather than using techniques better suited to laying out static printed pages. But, as @val3rie has discovered, it does require some pre-planning and preparation to obtain certain results, but all is possible if we understand what is going on under the hood.


Thanks for your reply
I still don’t get it about the size…how did you come up with the 785?
Do I have to resize the square image also, to 378 x 378?

it’s still not working, I don’t understand. I input 2 images with same heights
Large 785 x 378 like you told me, the square 378 x 378
Look at the size in the editing?? It’s 329 and the other one is 331 ???!!
And look at the preview mode, the space between is huge!

Yes, I’m really an illustrator who does a few bits of finished artwork and websites and started using Muse because it was part of the package. Liked the visual side of things, but totally agree it was a bit of a ‘one thing fits all, but doesn’t work for everything’ kind of programme.
However, if Blocs brought in a version of the crop to box option, still within the constraints of what makes it a pretty rock-solid programme, then it would be a very handy thing to have in the armoury.