CSS   21
style aw showcase css
Guest on 18th September 2023 07:59:52 AM


  1. /* Showcase
  2. -------------*/
  3.  
  4. .showcase
  5. {
  6.         position: relative;
  7.         margin: 0;
  8.         width: 680px;
  9.         height: 300px;
  10.         float: left;
  11.         overflow: hidden;
  12. }
  13.  
  14. /* This class is removed after the showcase is loaded */
  15. /* Assign the correct showcase height to prevent loading jumps in IE */
  16. .showcase-load
  17. {
  18.         height: 300px; /* Same as showcase javascript option */
  19.         overflow: hidden;
  20. }
  21.        
  22.         /* Navigation arrows */
  23.         .showcase-arrow-previous, .showcase-arrow-next
  24.         {
  25.                 position: absolute;
  26.                 background: url('images/arrows.png');
  27.                 width: 33px;
  28.                 height: 33px;
  29.                 top: 130px;
  30.                 cursor: pointer;
  31.                 z-index: 9996;
  32.         }
  33.        
  34.         .showcase-arrow-previous
  35.         {
  36.                 left: 4px;
  37.         }
  38.        
  39.         .showcase-arrow-previous:hover
  40.         {
  41.                 background-position: 0px -34px;
  42.         }
  43.        
  44.         .showcase-arrow-next
  45.         {
  46.                 right: 4px;
  47.                 background-position: -34px 0;
  48.         }
  49.        
  50.         .showcase-arrow-next:hover
  51.         {
  52.                 background-position: -34px -34px;
  53.         }
  54.        
  55.         /* Content */
  56.         .showcase-content
  57.         {
  58.                 text-align: center;
  59.                 /*background-color: #000;*/
  60.                 background-color:#FFF;
  61.         }
  62.                
  63.                 .showcase-plus-anchor
  64.                 {
  65.                         background-image: url('../images/plus.png');
  66.                         background-repeat: no-repeat;
  67.                 }
  68.                
  69.                 .showcase-plus-anchor:hover
  70.                 {
  71.                         background-position: -32px 0;
  72.                 }
  73.                
  74.                 .showcase-tool-tip
  75.                 {
  76.                         background-color: #fff;
  77.                         color: #000;
  78.                         text-align: left;
  79.                         padding: 5px 8px;
  80.                         background-image: url(images/white-opacity-80.png);
  81.                 }
  82.                
  83.                 .showcase-caption
  84.                 {
  85.         color: #000;
  86.         padding: 8px 15px;
  87.         text-align: left;
  88.         position: absolute;
  89.         bottom: 10px;
  90.         left: 10px;
  91.         right: 10px;
  92.         display: none;
  93.         background-image: url(images/white-opacity-80.png);
  94.                 }
  95.        
  96.         /* Button Wrapper */
  97.         .showcase-button-wrapper
  98.         {
  99.                 clear: both;
  100.                 margin-top: 10px;
  101.                 text-align: center;
  102.         }
  103.        
  104.                 .showcase-button-wrapper span
  105.                 {
  106.                         margin-right: 3px;
  107.                         padding: 2px 5px 0px 5px;
  108.                         cursor: pointer;
  109.                         font-size: 12px;
  110.                         color: #444444;
  111.                 }
  112.        
  113.                 .showcase-button-wrapper span.active
  114.                 {
  115.                         color: #fff;
  116.                 }
  117.        
  118.         /* Thumbnails */
  119.         .showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */
  120.         {
  121.                 background-color: #000;
  122.         }
  123.        
  124.         .showcase-thumbnail-wrapper
  125.         {
  126.                 overflow: hidden;
  127.         }
  128.                
  129.                 .showcase-thumbnail
  130.                 {
  131.                         width: 120px;
  132.                         height: 90px;
  133.                         cursor: pointer;
  134.                         border: solid 1px #333;
  135.                         position: relative;
  136.                 }
  137.                
  138.                         .showcase-thumbnail-caption
  139.                         {
  140.                                 position: absolute;
  141.                                 bottom: 2px;
  142.                                 padding-left: 10px;
  143.                                 padding-bottom: 5px;
  144.                         }
  145.                        
  146.                         .showcase-thumbnail-content
  147.                         {
  148.                                 padding: 10px;
  149.                                 text-align: center;
  150.                                 padding-top: 25px;
  151.                         }
  152.                        
  153.                         .showcase-thumbnail-cover
  154.                         {
  155.                                 background-image: url(../images/black-opacity-40.png);
  156.                                 position: absolute;
  157.                                 top: 0; bottom: 0; left: 0; right: 0;
  158.                         }
  159.                
  160.                 .showcase-thumbnail:hover
  161.                 {
  162.                         border: solid 1px #999;
  163.                 }
  164.                
  165.                         .showcase-thumbnail:hover .showcase-thumbnail-cover
  166.                         {
  167.                                 display: none;
  168.                         }
  169.                
  170.                 .showcase-thumbnail.active
  171.                 {
  172.                         border: solid 1px #999;
  173.                 }
  174.                
  175.                         .showcase-thumbnail.active .showcase-thumbnail-cover
  176.                         {
  177.                                 display: none;
  178.                         }
  179.        
  180.         .showcase-thumbnail-wrapper-horizontal
  181.         {
  182.                 padding: 10px;
  183.         }
  184.        
  185.                 .showcase-thumbnail-wrapper-horizontal .showcase-thumbnail
  186.                 {
  187.                         margin-right: 10px;
  188.                         width: 116px;
  189.                 }
  190.        
  191.         .showcase-thumbnail-wrapper-vertical
  192.         {
  193.                 padding: 10px;
  194.         }
  195.        
  196.                 .showcase-thumbnail-wrapper-vertical .showcase-thumbnail
  197.                 {
  198.                         margin-bottom: 10px;
  199.                 }
  200.                
  201.         .showcase-thumbnail-button-backward,
  202.         .showcase-thumbnail-button-forward
  203.         {
  204.                 padding: 7px;
  205.                 cursor: pointer;
  206.         }
  207.        
  208.         .showcase-thumbnail-button-backward
  209.         {
  210.                 padding-bottom: 0px;
  211.                 padding-right: 0px;
  212.         }
  213.        
  214.                 .showcase-thumbnail-button-backward .showcase-thumbnail-vertical,
  215.                 .showcase-thumbnail-button-forward .showcase-thumbnail-vertical,
  216.                 .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal,
  217.                 .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
  218.                 {
  219.                         background-image: url(../images/arrows-small.png);
  220.                         background-repeat: no-repeat;
  221.                         display: block;
  222.                         width: 17px;
  223.                         height: 17px;
  224.                 }
  225.                
  226.                 .showcase-thumbnail-button-backward .showcase-thumbnail-vertical
  227.                 {
  228.                         background-position: 0 -51px;
  229.                         margin-left: 55px;
  230.                 }
  231.                 .showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical
  232.                 {
  233.                         background-position: -17px -51px;
  234.                 }
  235.                
  236.                 .showcase-thumbnail-button-forward .showcase-thumbnail-vertical
  237.                 {
  238.                         background-position: 0 -34px;
  239.                         margin-left: 55px;
  240.                 }
  241.                 .showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical
  242.                 {
  243.                         background-position: -17px -34px;
  244.                 }
  245.                
  246.                 .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
  247.                 {
  248.                         background-position: 0 -17px;
  249.                         margin-top: 40px;
  250.                         margin-bottom: 40px;
  251.                 }
  252.                 .showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal
  253.                 {
  254.                         background-position: -17px -17px;
  255.                 }
  256.                
  257.                 .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal
  258.                 {
  259.                         background-position: 0 0;
  260.                         margin-top: 40px;
  261.                         margin-bottom: 40px;
  262.                 }
  263.                 .showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal
  264.                 {
  265.                         background-position: -17px 0;
  266.                 }
  267.                
  268.                 /* Hide button text */
  269.                 .showcase-thumbnail-button-forward span span,
  270.                 .showcase-thumbnail-button-backward span span
  271.                 {
  272.                         display: none;
  273.                 }
  274.        
  275.                
  276.  
  277.  
  278. /* Clear (used for horizontal thumbnails)
  279. -------------------------------------------*/
  280.  
  281. .clear
  282. {
  283.         clear: both;
  284.         display: block;
  285.         overflow: hidden;
  286.         visibility: hidden;
  287.         width: 0;
  288.         height: 0;
  289.         float: none;
  290. }
Raw Paste

Login or Register to edit or fork this paste. It's free.