An Image Can Make You Think A Thousand Thoughts

     What's up everyone, sorry for the lateness. I've been super focused with school this semester which is why I haven't been able to write as much as I would have, or write at all for that matter. I'm just in the mood to write and that's exactly what I'm going to do. Last time I wrote about how themes could make or break a site and the importance of giving options to your users. Well this week I will talk about the photos I used on my site. I chose out a few that I have and put them up on http://westleyjiujitsu.com/PHP%20Pages/photos.php. You can see both the happiness and intense in the expressions of the team. In all but one of the images I am smiling. In the one that I am not, I am focused.

     Images used on sites should be able to tell a story without physically saying a word. In the image above, I was in the middle of a belt test and I am concentrating on the technique being drilled by teammates. You can even see two girls in the back drilling techniques as well, showing that this is a sport for all ages and genders, one mat fits all. If you checked out photos page on my site, you will see that there is a sketched photo in place of the original photo. This is an effect that I absolutely wanted to do as soon as I learned about -webkit-transition. This CSS3 technique lets you have a transition effect to something, in my case it was a slow fade to another photo lying underneath.

     There are two photos, image_top and image_bottom. image _bottom is set to absolute position while image_top is set to position relative. What this does is get both images to set in the same position making for an easy transition effect. To do this, we have to work with the CSS style attribute, Opacity. This messes with basically the visibility of the photo. An opacity of 1 makes the photo appear normal, an opacity of .5 makes it look faded, and an opacity of 0 makes it invisible. So since the top image is the sketch, we want the opacity to go from 1 to 0 when the user hovers over it. This is done with image_top:hover{ opacity: 0;} Now you will see image_bottom. Now that worked and all, but the transition just was not smooth, that's where the -webkit-transition effect comes in.

     Like I mentioned earlier, you can use the transition effect on many style attributes so feel free to play with it, but for this demonstration we are using the opacity style attribute. To get the fade effect that we would like, we have to use the following CSS code: image_top { opacity: 1; -webkit-transition: opacity 1s ease;}.In this line of code we are saying to the browser to fade in the opacity of this image in 1 second at an ease speed. *To note, -webkit- is supported on Chromo and Safari, -moz- is supported on Firefox, -ms- is supported on Internet Explorer, and -o- is supported on Opera. So here is what the the code looks like in full:

.image_top {      position: relative;      opacity: 1;      -webkit-transition: opacity 1s ease;      -ms-transition: opacity 1s ease;      -moz-transition: opacity 1s ease;      -o-transition: opacity 1s ease; }
.image_top:hover {      opacity: 0; } .image_bottom {      position: absolute; }

Feel free to play with the transition effect, you'll be amazed of the stuff you can do with it. Thanks for reading and happy coding!