How to use code block to insert a floating image

I am just curious as to how to implement this style into future websites. I've just started experimenting with Code Blocks and would like to know how to make the below possible to add tiny details to my websites.

How can I insert a small, floating image like the tiny circle logo as shown in the screenshot below? Anytime I try to insert an image using HTML I can never get it to center WITHIN the code block, it always aligns to the left. And how can I format it to stay consistent across screen sizes such as on her website?

I would like to implement this feature on future sites and would love any help at all as to how to achieve this!

Site referencing: Brighten Made

There are many ways to do this, depending on the situation.

In this example, the image is contained within a Code Block on a separate section of the index (ie another page in the index). Some CSS then moves this page/image into a position that spans the section above.

I hope that helps.

-Paul

Squarespace Expert & Professional Developer

@Paul2009 thank you so much Paul! So using this example, let's say I wanted to implement this technique on the website below. I have inserted an image (see below) using a code block under the "Home Page Reviews" section within the Home Index. I'm a visual person, so I thought using an example would help me understand!

Test Website
Password: wedding

@Paul2009 thank you so much Paul! So using this example, let's say I wanted to implement this technique on the website below. I have inserted an image (see below) using a code block under the "Home Page Reviews" section within the Home Index. I'm a visual person, so I thought using an example would help me understand!

Test Website
Password: wedding

No problem. There are some lovely layouts and colors on the site :-)

If you'd like the logo to look something like this (see below) it must be in a section by itself, i.e. a new one under the reviews one.

@Paul2009 thanks so much! Still very much a work in progress.

Yes! So how did you go about doing that? I would create a new page within the index JUST containing that logo image? And then what CSS code specifically did you use to make it look like that? Seeing the code itself or a step-by-step would be super helpful!

Thanks again Paul! You da bomb.

@Paul2009 thanks so much! Still very much a work in progress.

Yes! So how did you go about doing that? I would create a new page within the index JUST containing that logo image? And then what CSS code specifically did you use to make it look like that? Seeing the code itself or a step-by-step would be super helpful!

Thanks again Paul! You da bomb.

Yes exactly. You don't want anything else in the same page/section so you'd need to remove the summary block from this one, or place the image in a new page.

Then, we can write the code to match the configuration. (You always need the design and layout BEFORE the code can be written.)

@Paul2009 gotcha. Thanks! I've created a new section with the image.

What would be the code then that I write to target the image and move it to the desired placement?

@Paul2009 gotcha. Thanks! I've created a new section with the image.

What would be the code then that I write to target the image and move it to the desired placement?

You should be able to get this effect:

with code similar to this (adjusting as necessary to meet your needs. Add it to Design > Custom CSS.

#float-section {
   background-color: transparent;
   width: 25%;
   position: absolute;
   z-index: 30;
   left: 80%;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
}
#float-section .sqs-block-code {
   padding: 0px;
}
#float-section .Index-page-content {
   padding-left: 30px;
   padding-right: 10px;
   padding-bottom: 65px;
}

I hope that helps.

-Paul

Squarespace Expert & Professional Developer

Contributors to this forum voluntarily give their time to help you. If we correctly answer your question, please accept the answer by clicking Accept below it (you'll see it when you're logged on). If an answer doesn't help, feel free to ask for more help or wait for other forum users to add their comments and/or answers.

Whenever an accepted answer helps you, please vote it up using the up arrow on the right. This helps other forum users by giving them confidence in an answer.

@Paul2009 thank you so much Paul! This is a game changer for adding some more customized touches to my websites & implementing more branding marks. You rock!!

@Paul2009 thank you so much Paul! This is a game changer for adding some more customized touches to my websites & implementing more branding marks. You rock!!