CSS ile Metin Kutucukları

#cevreleyici { 
  width: 800px; 
  margin: 100px auto; 
  } 
   
  #cevreleyici div { 
  transition: width 0.3s; 
  -moz-transition: width 0.3s; 
  -webkit-transition: width 0.3s; 
  -o-transition: width 0.3s; 
  float: left; 
  width:20%; 
  height: 180px; 
  overflow: hidden; 
  } 
   
  #cevreleyici:hover div { 
  width: 65px; } 
   
  #cevreleyici:hover div:hover { 
  width: 440px; 
  overflow: hidden; /*yazılar uzunsa bu alanı auto olarak değiştirin*/} 
   
  #adobewordpress {background-color:#bb5046; color:#fbdbd8; border-radius: 15px 0 0 15px;} 
  #adobe {background-color:#a6bb46; color:#e7f2b6; } 
  #wordpress {background-color: #FFCC00; color:white; } 
  #css {background-color:#46acbb; color:#caeff4; } 
  #seo {background-color:#b5b5b5; color:white; border-radius: 0 15px 15px 0;} 
   
  h1 {font-size: 115%;margin: 10px 10px .2em 25px; } 
  p {margin: 1em 25px; }

<div id="cevreleyici"> 
  <div id="adobewordpress"> 
  <h1>AdobeWordPress</h1> 
  
Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.
 
  </div> 
  <div id="adobe"> 
  <h1>Adobe</h1> 
  
Merkezi ABD'de Kaliforniya eyaletinde bulunan, Dünya'nın 10 büyük grafik ve medya yazılımlarını üreten şirkettir.
 
  </div> 
  <div id="wordpress"> 
  <h1>WordPress</h1> 
  <p>WordPress, GPL lisanslı, PHP ve MySQL kullanılarak yazılmış bir kişisel yayın sistemidir. </p> 
  </div> 
  <div id="css"> 
  <h1>CSS</h1> 
  <p> HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.</p> 
  </div> 
  <div id="seo"> 
  <h1>SEO</h1> 
  <p>Arama motorlarının web sayfalarını daha kolay bir şekilde taramasına olanak sağlayan teknik düzenlemeler. </p> 
  </div> 
  <div style="float: none; clear: both; height: 0;"> </div> 
  </div>