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. Blog 3 screenshot

Advertisements

2 thoughts on “Blog post 3: Rune Molnes portfolio site

  1. I think the image turning dark is the result of a black box with transparency over the image.
    This tutorial tells how the text and black box over image works: http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/

    These are the changes I made to the “I love dogs” webpage:

    I added a “span” to one of the image in HTML file, so there’ll be text “Dog 1” over the first image:

    In the CSS stylesheet, I added an inline-block display to the images with relative position, styled the text and gave the text a black background, got rid of the transition of the image and added the transition to the text.

    ul.gallery li{
    display: inline-block;
    position: relative;
    float:left;
    margin:20px;
    list-style:none;
    }

    span.text-content {
    background: rgba(0,0,0,0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width: 300px;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    }

    span.text-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }

    ul.gallery li:hover span.text-content {
    opacity: 1;
    }

    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