You are here

Home » API reference » Flickr 7

flickrstyle_magnifier.css in Flickr 7 

/**
 * The CSS values that are wrapped in '/*variable' comments are intended for use
 * by https://www.drupal.org/project/style_settings. Enable that module to
 * have those CSS variables exposed in the settings UI.
 */

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

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

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

File

style/css/flickrstyle_magnifier.css
View source 
  1. /**

  2.  * The CSS values that are wrapped in '/*variable' comments are intended for use

  3.  * by https://www.drupal.org/project/style_settings. Enable that module to

  4.  * have those CSS variables exposed in the settings UI.

  5.  */

  6. 

  7. .flickr-wrap a.flickr-img-wrap {

  8.   position: relative;

  9.   display: block;

  10. }

  11. 

  12. .flickr-wrap a span.hover-icon {

  13.   position: absolute;

  14.   bottom: 50%;

  15.   left: 50%;

  16.   display: block;

  17.   width: /*variable:flickrstyle_magnifier_size*/50px/*variable*/;

  18.   height: /*variable:flickrstyle_magnifier_size*/50px/*variable*/;

  19.   margin-bottom: /*variable:flickrstyle_magnifier_halfsize*/-25px/*variable*/;

  20.   margin-left: /*variable:flickrstyle_magnifier_halfsize*/-25px/*variable*/;

  21.   -webkit-transition-duration: 150ms;

  22.      -moz-transition-duration: 150ms;

  23.       -ms-transition-duration: 150ms;

  24.        -o-transition-duration: 150ms;

  25.           transition-duration: 150ms;

  26.   -webkit-transition-property: all;

  27.      -moz-transition-property: all;

  28.       -ms-transition-property: all;

  29.        -o-transition-property: all;

  30.           transition-property: all;

  31.   -webkit-transform: scale(0.1,0.1);

  32.      -moz-transform: scale(0.1,0.1);

  33.       -ms-transform: scale(0.1,0.1);

  34.        -o-transform: scale(0.1,0.1);

  35.           transform: scale(0.1,0.1);

  36.   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

  37.   filter: alpha(opacity=0);

  38.   -moz-opacity: 0;

  39.   opacity: 0;

  40. }

  41. 

  42. .flickr-wrap a:hover span.hover-icon {

  43.   position: absolute;

  44.   -webkit-transform: scale(1,1);

  45.      -moz-transform: scale(1,1);

  46.       -ms-transform: scale(1,1);

  47.        -o-transform: scale(1,1);

  48.           transform: scale(1,1);

  49.   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=/*variable:flickrstyle_magnifier_opacity*/0.85/*variable*/);

  50.   filter: alpha(opacity=/*variable:flickrstyle_magnifier_opacity*/0.85/*variable*/);

  51.   -moz-opacity: /*variable:flickrstyle_magnifier_opacity*/0.85/*variable*/;

  52.   opacity: /*variable:flickrstyle_magnifier_opacity*/0.85/*variable*/;

  53. }