JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<ul class="mh-menu">
    <li>
        <a href="#">
                      <span>طائر تويتر</span> 
            <span>طاشر تويتر يتغير حسب الوقت</span>

        </a>
        <img src="http://3.bp.blogspot.com/-g-qzsLKDmdY/U4DY_Rtpb6I/AAAAAAAAB0k/rcz0haBIz1Y/s1600/%D8%A7%D8%B2%D8%B1%D9%82+%D8%BA%D8%A7%D9%85%D9%822.png" alt="image01"/>
    </li>
    <!-- ... -->
    <li>
        <a href="#">
           <span>تغير خلفية مدونتك</span> 
            <span>وصف الصورة</span>
        </a>
        <img src="http://im59.gulfup.com/eeLzGB.jpg" alt="image01"/>
    </li>
     <li>
        <a href="#">
             <span>الصورة</span> 
            <span>وصف الصورة</span>
        </a>
        <img src="http://im59.gulfup.com/aiOkEy.jpg" alt="image01"/>
    </li>
    <!-- ... -->
    <li>
        <a href="#">
            <span>الصورة</span> 
            <span>وصف الصورة</span>
        </a>
        <img src="http://im59.gulfup.com/eeLzGB.jpg" alt="image01"/>
    </li>
</ul>

CSS

.mh-menu li:hover a{
    background-color: rgba(174,54,55,0.9);
}

.mh-menu li a span:nth-child(2){
    
    /*...*/
    display: block;
    transition: color 0.2s linear;
}

.mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
    height: 100%;
    left: 350px;
    opacity: 2;
}
.mh-menu li a {
    color: #333;
text-decoration: none;
    list-style: none;
display: block;
width: 280px;
padding: 0px 10px;
text-align: left;
position: relative;
z-index: 10;
height: 97px;
border-right: 1px solid #ddd;
background: rgba(255,255,255, 0.8);
}
ol, ul {
    list-style: none;
}