<?php
/**
* @title      joombig circle hover effects module
* @website      http://www.joombig.com
* @copyright   Copyright (C) 2013 joombig.com. All rights reserved.
* @license      http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
*/

?><link rel="stylesheet" href="<?php echo $mosConfig_live_site; ?>/modules/mod_joombig_circle_hover_effects/tmpl/Circlehovereffects/css/style.css" />
<link rel="stylesheet" href="<?php echo $mosConfig_live_site; ?>/modules/mod_joombig_circle_hover_effects/tmpl/Circlehovereffects/css/font_face.css" />
<style>
   #main_circle_hover_effects{
      width:<?php echo $width_module; ?>;
      margin: 0 auto;
      padding-left:<?php echo $left_module; ?>;
   }
   .jb-circle-hover-ch-grid{
      padding: 0px 0px 10px 0px !important;
      list-style: none;
      display: block;
      text-align: center;
      width: 100%;
   }   
   .jb-circle-hover-ch-grid li {
      width:<?php echo $width_item; ?>px;
      height: <?php echo $width_item; ?>px;
      margin: 0px <?php echo $distance; ?>px <?php echo $bottom_item_res; ?>px <?php echo $distance; ?>px !important;
      vertical-align: top;
   }
   .jb-circle-hover-ch-grid #jb-circle-hover-attr h3{
      color:<?php echo $color_title; ?>;
      margin:0;
   }
   .jb-circle-hover-ch-grid #jb-circle-hover-attr p{
      color:<?php echo $color_des; ?>;
   }
   .jb-circle-hover-ch-item {
      box-shadow: inset 0 0 0 0 rgba(157,238,140, 0.4),
       inset 0 0 0 <?php echo $border_circle; ?>px rgba(<?php echo $border_color_real; ?>,0.6),
       0 1px 2px rgba(0,0,0,0.1);
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
   }
   <?php if ($dis_background_hover == 1) { ?>
      .jb-circle-hover-ch-item:hover {
         box-shadow: inset 0 0 0 <?php echo ($width_item / 2 + 1); ?>px rgba(<?php echo $background_color_hover; ?>,0.4),inset 0 0 0 <?php echo $border_circle; ?>px rgba(<?php echo $background_color_hover; ?>,0.6),0 1px 2px rgba(0,0,0,0.1);
      }
   <?php
} ?>
</style>
<div id="main_circle_hover_effects">
   <ul class="jb-circle-hover-ch-grid">
      <?php
$count = 1;
foreach ($data as $index => $value) { ?>
         <li>
            <div class="jb-circle-hover-ch-item jb-circle-hover-ch-img-<?php echo $count ?>" style="background:url(<?php echo JURI::root() . $value['image']; ?>) no-repeat center center;background-size:cover;">
               
               <div class="jb-circle-hover-ch-info">
               <?php if ($show_readmore == 1) { ?>
                  <h3 style="font-size:<?php echo $font_size_readmore ?>px;"><a href="<?php echo $value['Link']; ?>"><?php echo $readmore_text; ?></a></h3>
               <?php
    } ?>
                  <p style="font-size:<?php echo $font_size_readmoreinfo ?>px;"><?php echo $value['readmoreinfo']; ?></p>            
               </div>
            </div>
            <div id="jb-circle-hover-attr">   
               <?php if ($show_title == 1) { ?>
                  <h3 style="font-size:<?php echo $font_size_title; ?>px;font-weight:<?php echo $font_weight_title; ?>;?>;"><?php echo $value['title']; ?></h3>
               <?php
    } ?>
               <?php if ($show_des == 1) { ?>
                  <p style="font-size:<?php echo $font_size_des; ?>px; font-weight:<?php echo $font_weight_des; ?>;"><?php echo $value['intotext']; ?></p>
               <?php
    } ?>   
            </div>
         </li>
      <?php $count++;
} ?>          
   </ul>
   
</div>