I’m not sure what this website is or what it’s trying to do because I believe it is in German, but it did have an element that I liked. http://www.hundertgrad.de/ I’m interested in the use of CSS on photos, so I was hoping to find out a cool technique for photo movement or something like that. This website doesn’t exactly have photo movement, but when you hover over the photos, a dark tint is put over them and text is brought up.
I think this is a good way to streamline your design, and avoid out of place text. Only when the user moves the curser over the photo does text appear, and that is when you really need to see the text. The photo is also a link that will take you to another page on the website.
I’m not entirely certain how it all works, but from looking at the code, it seems to have the photo there until the curser is over it. Then a preview image, which is just a transparent black photo with text on it, moves over top. It’s not too dark that the can’t see the image, but it’s dark enough that you can tell it’s the preview. As you can see in the code below, they have the original image and then the preview hover image:
<div class=”type-portfolio_flex kachel large” data-small-left=”30″ data-small-top=”80″ data-medium-left=”280″ data-medium-top=”90″ data-large-left=”370″ data-large-top=”80″ data-xlarge-left=”592″ data-xlarge-top=”128″ style=”left: 370px; top: 80px;”>
<a href=”#walter-ag-imagekampagne” class=”teaser is-portfolio_flex” data-id=”229″ data-type=”portfolio_flex” data-layer-footer=”true” data-layer-nav=”true”>
<img alt=”” src=”http://www.hundertgrad.de/wp-content/uploads/2014/06/Hundert-Grad-Kommunikation-Walter-AG-Imagekampagne-01-hover.png” class=”preview-hover”>
I like how the text appears over top of the photo, so that all the photos can fit nicely together. I would have liked to see some movement on the photos, such as increasing their size when hovering over them, but we practiced that in class so I think I would be able to do that on my own.