By Andrea Jankelow
When I was looking for CSS techniques on the internet, I thought of looking at a graphic designer’s portfolio because designers typically have elements they want to show off and they tend to do it in a very aesthetically appealing way. I found CharlotteTang.com which is a beautifully designed site. On her home page she highlights 12 projects by showing an image in a circle. All the images appear black and white, but when you hover over them, they change to color and a title pops up. I thought this was a really cool way of showcasing your work and really making each project “pop”.
So I tried to figure out how it worked. I must say, this was a little difficult because she had some more advanced coding on there and it was tough to figure out what was what. However, I started to piece together how it worked. In her HTML coding, she created a section titled “portfolio” that has each image under a separate “article”. For each image she created a class that she would then use CSS to create a transition for the image. She floated all her images in the portfolio left. She then created a border radius for her images to add a stroke around the circle. After that, she added an ease-in-out transition that took .2 seconds. She created a hover transition that would then make the image change from gray (#fff) to the original image color.
Overall, this definitely wasn’t the easiest CSS to figure out and she really integrated it well. I think I would need some practice, but I would love to master a css transition like this for my own portfolio site!