السلام عليكم ورحمة الله تعالى وبركاته, عدنا لكم مجددا لنقدم لكم إضافة جديدة وهي آداة حكمة اليوم احترافية توضع بالسايدبار بتأثير رائع عند تمرير الموس فوقها, الاضافة سهلة التركيب يمكن وضعها في اداة html بالتخطيط, سأترككم مع المعاينة وطريقة التركيب 😊.

معاينة حية للاضافة

عمرك في هذه الدنيا محدود جدا فلا تبدده في محاولات العيش على طريقة الآخرين

حكمة اليوم !

طريقة التركيب

<style>
.shouro7at-quotebox{
      -webkit-transition: all 1s !important;
    color: #fff;
    direction: rtl;
    width: 310px;font-size: 9px;
    height: auto;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('http://maliactu.net/wp-content/uploads/2016/01/SteveJobs.jpeg') no-repeat;
    border-radius: 5px;
    padding: 5px 0;
    background-size: 150%;
    background-position: 17% 0%;}
.shouro7at-quotebox h1 {
    display: none;
    color: #ffffff;
    padding: 50px 20px;
    text-align: center;
    line-height: 50px;}
.shouro7at-quotebox img {
    width: 40px;
    margin: -6px;
}
   .shouro7at-quotebox h3 {
    padding: 2px 0;
    font-size: 22px;
    font-weight: 700;
    color: #382918;
    margin: 8px 20%;
    background: rgba(255, 255, 255, 0.81);
    border-radius: 5px;
}
.shouro7at-quotebox:hover{
    background-size: 170%;
    background-position: 50% 5%;
}
.shouro7at-quotebox:hover >  center {display:none;}
.shouro7at-quotebox:hover >  h3 {display:none;}
.shouro7at-quotebox:hover >  h1 {display:block;}
i.fa.fa-quote-left {
    font-size: 50px;
    position: absolute;
    left: 15px;
    bottom: 5px;
    color: rgba(255, 255, 255, 0.32);
}
i.fa.fa-quote-right {
    font-size: 50px;
    position: absolute;
    right: 15px;
    top: 5px;
    color: rgba(255, 255, 255, 0.32);
}
</style>
<div class="shouro7at-quotebox">
<h1>
<i class="fa fa-quote-right"></i>عمرك في هذه الدنيا محدود جدا فلا تبدده في محاولات العيش على طريقة الآخرين
<i class="fa fa-quote-left"></i></h1>
<center>
<h3>
حكمة اليوم !</h3>
<img src="http://www.nwtexhibits.ca/icepatch/img/icon-chevron-down-512px.png" /></center>
</div>