<!-- الحاوية -->
<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;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.