Blog 3: CSS Technique

By Andrea Jankelow

Each circle image changed to full cover when you hover over it

Each circle image changed to full cover when you hover over it

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!

Advertisements

One thought on “Blog 3: CSS Technique

  1. I’m impressed you were able to understand all of that. Now that you’ve explained it, it doesn’t seem as complicated. But I agree, by just looking at it, it’s extremely difficult to understand and looks impressive. The pop of color is very fun. I don’t think this would work on a news site but would be fun on a personal blog or portfolio like this one.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s