Streaming live at 10am (PST)

Team Section Image Map Help


#1

Hello Webflow forum,

This is my first post! I have an idea for the team section of a website for an architecture firm. The idea is that I have a single image of 5 or 6 people standing in a group with the hope that when you hover over each person, their physical profile will change opacity and display their personal description in the space below. Is this possible? I believe it is called an image map, but I am open to all ideas.

If I could get some help that would be great! This website is a work in progress and I assume this is may require some coding and that’s okay. Just keep in mind that I am not a proper web designer, just a member of the arch firm (so try and keep your descriptions basic).

Thanks a ton!
Charlie

https://preview.webflow.com/preview/charles-garneys-stellar-project?preview=5f7cf2aa0ee1f750ba520d767f8f9e24


#2

Sure you can do this without custom code. A suggestion. First, I would remove the gradient from this section, headshots are a critical section for customers, a gradient it’s not needed. You want team photos with the highest resolution, crisp and clear so they pop out at the visitor. Often sections like this can be over-analyzed. Don’t overthink headshots, their faces are fabulous, and their personalities are apparent. The color diminishes their smiles. :grin:

Question #1:
Is this one big image of the team, or are they individual photos? Meaning, in Photoshop or the photo program used, are these headshots individual pics, or a collage? This will dictate the steps in creating your interaction.


#3

Thanks for the response Gary,

Good to know I will not need to use code! Also, you bring up some good points, I will definitely rethink the gradient.

The image was created in Photoshop by collaging photos of the 6 individuals.


#4

Gotcha, if you could get that PS file opened with available layers, the effect you want will be … eh… a little easier to execute. Probably 2 or 3 steps eliminated - AND - you won’t need to put 6 hotspots on the page. Individual pics would be great!

Is this possible? I can help you get this done either way.


#5

For sure,

I’ve got the PS file with an individual layer for each person open and ready.


#6

What are the file resolutions? Sorry, I didn’t see the each.


#7

Sorry,

Maybe I misunderstood. Did you want me to attach the files?


#8

Um okay there’s quite a few steps in this. Do you know how to use Photoshop well? If not, we can use a Join.me screencast and I can take over your screen to show how.


#9

Yes, Im pretty good at Photoshop. Try to explain it. If this does not work then maybe there is a YouTube tutorial or we can join.me


#10

Gotcha. These steps depend on the largest file size of the photos. What is the smallest & largest size of these files?


#11

As jpegs the file sizes for the individual photos range from 150Kb-400Kb


#12

No no resolution - 2000x2000 pixels, etc??


#13

O ok. Roughly ~1500x1300px


#14

Great! So use these steps in PS:

  1. Open new document, make 1300x1300, 16 bit, transparent background. Now if they all have the same height dimensions this will work. If not, use the lowest height of all the images for the setting.

  2. Once opened, don’t open all the files in PS. Instead open the folder directory. Drag one of the photos into PS. Don’t do anything else. It will place the image dead center of the file, but it will constrain to the document’s size.

  3. Save file.

  4. Repeat insert steps for all the files, one at a time. Make sure to name each layer to the name of team member after you drag in.

If you want, send me your email my Webflow profile and I’ll send a screenshare we can use. If you prefer.


#15

Im busy for the next hour but I will get to it after that.


#16

Sure thing. Hey, if you want send me all those jpegs in a compressed folder to my profile. I’ll do it for you and send back.