Mam problem ze zmianą efektu.

Efekt znajduje się na stronie
LINK
Dokładniej to niebieska ramka na na dole po lewej stronie. W tym momencie niebieski kwadrat z treścią "cześć" nakłada się na obrazek. Chcę zrobić aby niebieski kwadrat nakładał się w taki sam sposób jednak aby jego lewa prawa strona oraz góra i dół rozciągały się o około 20px w każda z tych stron.
W jaki sposób można to zrobić?



[CSS] pobierz, plaintext 
  1.  
  2. <style>
  3.   #sg1_all
  4.   {
  5.     width: 873px;
  6.     height: 150px;
  7.   }
  8.   #sg1_o1
  9.   {
  10.     background-image: url("images/Skroty/mal.png");
  11.     width: 291px;
  12.     height: 150px;
  13.     float: left;
  14.   }
  15.   #sg1_o2
  16.   {
  17.     background-image: url("images/Skroty/mis.png");
  18.     width: 291px;
  19.     height: 150px;
  20.     float: left;
  21.   }
  22.   #sg1_o3
  23.   {
  24.     background-image: url("images/Skroty/sid.png");
  25.     width: 291px;
  26.     height: 150px;
  27.     float: left;
  28.   }
  29.   .slide-up-boxes a 
  30.   { 
  31.      display: block; 
  32.      height: 150px; 
  33.      overflow: hidden; 
  34.   }		
  35.   .slide-up-boxes h5 
  36.   { 
  37.      color: #333; 
  38.      text-align: center;
  39.      height: 150px; 
  40.      font: italic 18px/65px Georgia, Serif;
  41.      opacity: 1;
  42.      -webkit-transition: all 0.2s linear; 
  43.      -moz-transition: all 0.2s linear; 
  44.      -o-transition: all 0.2s linear;
  45.   }
  46.   .slide-up-boxes a:hover h5 
  47.   { 
  48.      margin: -75px;
  49.      opacity: 0; 
  50.   }
  51.   .slide-up-boxes div 
  52.   { 
  53.      position: relative; 
  54.      color: white; 
  55.      font: 12px/15px Georgia, Serif;
  56.      height: 150px;  
  57.      opacity: 0; 
  58.      -webkit-transform: rotate(6deg); 
  59.      -webkit-transition: all 0.4s linear; 
  60.      -moz-transform: rotate(6deg); 
  61.      -moz-transition: all 0.4s linear; 
  62.      -o-transform: rotate(6deg); 
  63.      -o-transition: all 0.4s linear; 
  64.   }
  65.   .slide-up-boxes a:hover div 
  66.   { 
  67.      opacity: 1; 
  68.      -webkit-transform: rotate(0); 
  69.      -moz-transform: rotate(0); 
  70.      -o-transform: rotate(0); 
  71.   }
  72.   .slide-up-boxes a:nth-child(1) div 
  73.   { 
  74.     background: url(images/Skroty/mk.jpg); 
  75.   }
  76.  
  77. </style>
[CSS] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1.  
  2. <html>
  3. <head>
  4.  
  5. </head>
  6. <center>
  7. <div id = "sg1_all">
  8.   <div id="sg1_o1">
  9.     <section class="slide-up-boxes">
  10.       <a href = "#">
  11.         <h5>bye bye</h5>
  12.         <div>czesc</div>
  13.       </a>
  14.     </section>
  15.   </div>
  16.   <div id="sg1_o2"></div>
  17.   <div id="sg1_o3"></div> 
  18. </div>
  19. </center>
  20. </html>
[HTML] pobierz, plaintext