<!-- الحاوية -->
<div id="container">
<!--  الصورة ياللي بداخل الحاوية -->
  <a href="https://www.facebook.com/groups/ElzeroWebSchool/" target="_blank"><img src="https://static.tumblr.com/f9f4253d58950721ab4e47214ebcac39/asrymop/9P4nnlfhb/tumblr_static_tumblr_static_ck5wlz6qil4ccsgw04cwwocsw_640.gif" alt="Omar"> </a>
  <div class="box-text">
  <h1>Elzero Web School</h1>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Bad+Script|Bellefair|Comfortaa|Satisfy|Slabo+27px|Vidaloka');



/* لون خلفية الصفحة */
body{background: #DDCECD;}

#container {
/*  العرض تلقائي حتي تكون الصورة متجاوبة مع الشاشاة المختلفة */
  width: auto;
/*  تم وضع اقصي مساحة للعرض حتي نحافظ علي جماليات التصميم */
  max-width: 500px;
/*  الطول تلقائي حتي تحتفظ الصورة اللي بداخله دقتها وتكون متجاوبة */
  height: auto;
/*  لتوسيط الحاوية في وسط الصفحة */
  margin: 5em auto;
/*  اي شئ خارج نطاق الحاوية قم بأخفاءه */
  overflow: hidden;
/*  الاطار الخاص بالحاوية */
  border: 10px solid #EEE5E5;
  outline: 5px dashed #EEE5E5;

  position: relative;
/*  z-index: 1; */
  
  
}
#container img {
  width: 100%;
  height: 100%;
  margin-bottom: -5px;
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 2;
}


/* الطريقة الاولي */
/* عندما المس الصورة قم بتكبيرها */
/* #container img:hover {transform: scale(1.2, 1.2);} */

/* الطريقة الثانية */
/* عندما المس الحاوية قم بتكبير الصورة */
#container:hover img {
  transform: scale(1.2, 1.2);
  z-index: 9;
}

.box-text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 10px;
    background-image: linear-gradient( 135deg, rgba(129, 255, 239, 0.50) 10%, rgba(240, 103, 180, 0.65) 100%);
  opacity: 1;
  transition: 0.3s linear;
  color: #FFF;
  font-family: 'Bellefair', serif;
font-family: 'Satisfy', cursive;
/* font-family: 'Slabo 27px', serif; */
/* font-family: 'Vidaloka', serif; */
  text-shadow: 2px 2px 2px #333;
  
}
.box-text h1 {
  font-size: 2.2em;
  font-family: 'Bellefair', serif;
font-family: 'Comfortaa', cursive;
}
.box-text p {font-size: 1.5em;}
.box-text:hover{opacity: 0;}