Use Case
The current images on the cell catalog are small and static. They have been reworked to be more engaging.
Details
Images have been expanded to fill a rectangle rather than fit into a circle. They are overlayed with the Cell Line ID on a white banner with 85% opacity. See designs for font size and padding.
Images will always have identical widths, but may have varying heights depending on whether a line is a multiedit or not (multiedits are taller). Images should always fill to fit width.
Interaction
Hovering over the image expands it to a max height of 240px, including the cell line ID banner which is again overlayed. The image should be its correct aspect ratio in the hover state, meaning if is 20x24px it expands to 200x240 pixels. Most of the images should be a square. Ideally the image is a video that begins playing on hover and loops as long as the mouse is over the image.
Clicking the image goes to the cell line details page.
Interact with the prototype here to see how it feels.
Use Case
The current images on the cell catalog are small and static. They have been reworked to be more engaging.
Details
Images have been expanded to fill a rectangle rather than fit into a circle. They are overlayed with the Cell Line ID on a white banner with 85% opacity. See designs for font size and padding.
Images will always have identical widths, but may have varying heights depending on whether a line is a multiedit or not (multiedits are taller). Images should always fill to fit width.
Interaction
Hovering over the image expands it to a max height of 240px, including the cell line ID banner which is again overlayed. The image should be its correct aspect ratio in the hover state, meaning if is 20x24px it expands to 200x240 pixels. Most of the images should be a square. Ideally the image is a video that begins playing on hover and loops as long as the mouse is over the image.
Clicking the image goes to the cell line details page.
Interact with the prototype here to see how it feels.