DIY Flickr Style Guide

It's easier and less error prone to use the sub-module Flickr Style but if you are inclined to do it yourself, here are some instruction to help you on the way.

Create a file custom.css in your theme's CSS directory and add the following line to the [your-theme].info file:

...
stylesheets[all][] = custom.css
...

Place your custom.css as the last stylesheet in the list to ensure it is loaded last.

Default style

Rounded corners

Now add the following to your custom.css file:

/*START CUSTOM FLICKR CSS*/
.flickr-photo-img {
-webkit-border-radius: 1.3em;
-moz-border-radius: 1.3em;
-ms-border-radius: 1.3em;
-o-border-radius: 1.3em;
border-radius: 1.3em;
}

Shadow

Add to the lines above:

-webkit-box-shadow: 2px 2px 7px 3px #A5A5A5;
box-shadow: 2px 2px 7px 3px #A5A5A5;

Border

Add to the lines above:
border: solid 3px white;

Caption

To extend the same style to the caption add:

span.flickr-credit {
/*Modify font-size and line spacing depending on your base font*/
line-height: 110%;
font-size: 90%;
/*Use the dedicated field at admin/config/media/flickr for a horizontal inside spacing value (padding/border).*/
padding: 3px 10px;
/*Additional space between the image and caption box*/
margin-top: 3px;
-webkit-border-radius: 1.3em;
-moz-border-radius: 1.3em;
-ms-border-radius: 1.3em;
-o-border-radius: 1.3em;
border-radius: 1.3em;
-webkit-box-shadow: 2px 2px 7px 3px #A5A5A5;
box-shadow: 2px 2px 7px 3px #A5A5A5;
}
/*END CUSTOM FLICKR CSS*/

To make sure the caption is not wider as the image, set a value for the field 'Make the caption smaller in width' on the Flickr configuration page at /admin/config/media/flickr. In the example above it is '10px'. If you also specify a border, double the horizontal padding value and add the border-width once (e.g. 2 x padding: 10px + 1 x border-width: 2px = 22px).
 

Variations

Above code snippets are examples intended to be modified to your liking.

Extend or limit the style through the target element

For example depending on your theme changing .flickr-photo-img to #content img excludes images in the blocks and extends the style to all images in the node's content area, not only those of the Flickr module.

Change the values

Try:
border: double 9px grey;

Use the wrapper instead

There is no need to set a value for the field 'What horizontal inside spacing is applied on the caption? (padding/border)'. That is only needed if the caption itself is boxed with a shadow or border.

/*START CUSTOM FLICKR CSS*/
.flickr-wrap {
-webkit-border-radius: 1.3em;
-moz-border-radius: 1.3em;
-ms-border-radius: 1.3em;
-o-border-radius: 1.3em;
border-radius: 1.3em;
-webkit-box-shadow: 2px 2px 7px 3px #A5A5A5;
box-shadow: 2px 2px 7px 3px #A5A5A5;
border: solid 5px white;
}

.flickr-photo-img {
margin: 10px 10px 0;
-webkit-border-radius: 0.7em;
-moz-border-radius: 0.7em;
-ms-border-radius: 0.7em;
-o-border-radius: 0.7em;
border-radius: 0.7em;
}

span.flickr-credit {
/*Modify font-size and line spacing depending on your base font*/
line-height: 110%;
font-size: 90%;
padding: 3px 10px;
/*Additional space between the image and caption box*/
margin-top: 3px;
}
/*END CUSTOM FLICKR CSS*/

Emphasize an image on hover (mouse-over).

Sometimes it's not clear to visitors that the images are clickable, even if their mouse pointer changes. Nowadays we can make that more clear using CSS3 transitions, transformations and animations. Examples.
 

Enlarge image size slightly

.flickr-photo-img:hover {
-webkit-transform:scale(1.05);
-ms-transform:scale(1.05);
transform:scale(1.05);
}
.flickr-photo-img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

Zoom in

Note that rounded corners are not preserved on hover.

.flickr-wrap .flickr-photo-img:hover {
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2);
}
.flickr-wrap {
overflow:hidden;
}
.flickr-photo-img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

Magnifier icon on hover (example)

This only makes sense if you open the image in an overlay browser like Colorbox or Lightbox.

Although considered bad practice, hack the flickr.module file. In the last part of function theme_flickr_photo($variables) change:

    return '<span class="flickr-wrap' . $class_float . '"' . $style_float . '>' . l($img, $url, array(

into:

    return '<span class="flickr-wrap' . $class_float . '"' . $style_float . '>' . l($img . '<span class="hover-icon"><img src="http://cdn-img.easyicon.net/png/5053/505399.png" style="width:50px;height:50px;"></span>', $url, array(

In your custom CSS add:

.flickr-wrap a.colorbox {
display: block;
position: relative;
}

.flickr-wrap a span.hover-icon {
position: absolute;
display: block;
bottom: 50%;
left: 50%;
margin-bottom: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: scale(0.1,0.1);
-webkit-transform: scale(0.1,0.1);
-o-transform: scale(0.1,0.1);
-ms-transform: scale(0.1,0.1);
transform: scale(0.1,0.1);
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 150ms;
-webkit-transition-duration: 150ms;
-o-transition-duration: 150ms;
transition-duration: 150ms;
}

.flickr-wrap a:hover span.hover-icon {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.85);
opacity: 0.85;
position: absolute;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
}

Note that a custom class is used, in this case 'colorbox' set on the Flickr configuration page at admin/config/media/flickr.

This won't display well if you are using inline styling to float (e.g. [flickr-photo:id=9247388074, size=m, style=float:left;]).

An alternative GPL licensed magnifier icon for future inclusion in the module: http://commons.wikimedia.org/wiki/Category:Magnifying_glass_icons#mediav...

Credit:
Sample image Man, horse and moon by Martin Postma. License: Creative Commons.