Blog 3: Creative Momentum Web Design Firm

Funny thing is I actually found this CSS tool on a web design firm site called Creative Momentum. I scrolled through and noticed a cool transformation on it’s photos where you can click to see more of their work. When you put your cursor over one of the photos, a circle thing appears over it and says “See more”. I thought that looked really cool and would love to do that myself. Here is an example of the sites CSS transition:

Screen Shot 2015-02-24 at 2.26.43 PM

via: http://thecreativemomentum.com/
via: http://thecreativemomentum.com/

I used the inspector element tool on Google Chrome. It was intimidating to look at. There are a lot of things to chose from. I hope I found the right part. So this is what I found:

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.2s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(0, 0, 0);
background-image: none;
background-origin: padding-box;
background-size: auto;
color: rgb(255, 255, 255);
cursor: auto;
display: inline-block;
font-family: ‘Open Sans’, helvetica, arial;
font-size: 14px;
font-weight: 200;
height: 280px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
text-decoration: underline;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-in;
width: 280px;

I’m going to try it on my own and see what happens.

Advertisements

3 thoughts on “Blog 3: Creative Momentum Web Design Firm

  1. This is very cool as a way to add a link and animation pictures! It not only helps identify what are clickable but also encourages users to click it by assuring them what they will get. Although I wonder if this is the complete coding since I tried it on my page and it doesn’t look exactly right. Maybe I need to work on my html text to make them correspond with each other. Thanks for sharing!

    Like

  2. This concept is a little similar to the one I posted about, where you can hover over images, and each image is interactive on its own. I think that this one you’re talking about is really cool, and I’d also like to try it, even though the amount of coding for one simple thing really is overwhelming.

    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