Blog post 3: Rune Molnes portfolio site

For the third blog assignment, I was looking around at different sites trying to find a CSS technique I thought would be cool and that I could put into use. So I decided to find a portfolio website I liked and look at it’s features. I found this site with a cool CSS element to it: http://runemolnes.com/portfolio

On the portfolio page, there are several images that show the artists work. When the user hovers over the image, it darks a little bit. So I used the “inspect element” helper in Chrome and found that the code used to do this was opacity. So I tried it out on our test site from class, “I love dogs.”

It ended up being a lot simpler than I thought it would be. Here is the code we wrote in class:

ul.gallery li a img{
/*float:left;*/
width: 200px;
opacity: 1.0;
transition:-transform 0.2s ease-in-out;
-webkit-transition:-webkit-transform 0.2s ease-in-out;
-moz-transition:-moz-transform 0.2s ease-in-out;
}

ul.gallery li a:hover img{
opacity: .9;
border-bottom: 5px solid purple;
padding:10px;
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
/*box-shadow:4px 4px 4px rgba(0, 0, 0, 0.5);*/
}

I took out the rotation and the pink background to better show the opacity. The only lines I added to the coding are the ones in bold. The opacity is on a scale of 0 to 1.0, so I made my image change from 100% to 80% opaque. You add the first opacity in the gallery list item section. Then you put the second one (what you want the opacity to change to) in the gallery list item hover section, so that when the user hovers over it, it will change. My opacity came out lighter instead of darker. I played around with my coding some more, and couldn’t figure it out all the way. Based on the site’s code, I think they did theirs backwards, and have some kind of background color in play that helped it turn out darker in the end.

I also liked the site’s toolbar at the top. It had yellow bars underneath when you hover over it. That was actually really simple to add too. In the hover section, you can just add a bottom border. In the screenshot you can see the purple I added. It is a little different when it borders photos instead of text, but it has the same effect. In the hover section, if you also add padding and comment out the box shadow, the line appears a little separated from the picture without clearly showing the box around it.