JSFiddle - React, Tailwind, and code Playground

by midhun_k

HTML

<div class="accordian">
    <ul>
        <li>
            <div class="image_title">
                <a href="#">abhi</a>
            </div>
            <a href="#" class = "A">
                <img src="http://multunus.com/wp-content/uploads/2012/04/abhilash.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">abhi</a>
            </div>
            <a href="#" class = "B">
                <img src="http://multunus.com/wp-content/uploads/2012/04/abhilash.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">abhi</a>
            </div>
            <a href="#" class = "C">
                <img src="http://multunus.com/wp-content/uploads/2012/04/abhilash.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">abhi</a>
            </div>
            <a href="#" class = "D">
                <img src="http://multunus.com/wp-content/uploads/2012/04/abhilash.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">abhi</a>
            </div>
            <a href="#" class = "E">
                <img src="http://multunus.com/wp-content/uploads/2012/04/abhilash.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">abhi</a>
            </div>
            <a href="#" class = "F">
                <img src="http://multunus.com/wp-content/uploads/2012/04/abhilash.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">abhi</a>
            </div>
            <a href="#" class = "G">
                <img src="http://multunus.com/wp-content/uploads/2012/04/abhilash.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">abhi</a>
            </div>
         ...

CSS

.accordian {
    width: 1100px; height: 400px;
    overflow: hidden;
    
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.accordian ul {
    width: 2000px;
}

.accordian li {
    position: relative;
    display: block;
    width: 122px;
    float: left;
    
    border-left: 1px solid #888;
    
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;

}


.accordian ul:hover li {width: 100px;}
.accordian ul li:hover {width: 300px;}


.accordian li img {
    display: block;
}

/*Image title styles*/
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0; bottom: 0;    
    width: 1100px;    

}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}