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).
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.
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.
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.
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.
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.
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.
Save file.
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.