JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<ul class="productlist">
    <li>
        <div class="imagebutton"> <a href="#"></a>

            <img src="http://images.hepsiburada.net/assets/EE/500/EE_4630908.jpg" />
        </div>
         <h3>Samsung 78JS9500 78" 198 Ekran [4K] SUHD Uydu Alıcılı 3D</h3> 
        <div class="links"> <span class="cartclose cartbutton">Sepetten Çıkart</span>
 <a href="#" class="cartdetail">İncele</a>

        </div>
    </li>
    <li>
        <div class="imagebutton"> <a href="#"></a>

            <img src="http://images.hepsiburada.net/assets/EE/500/EE_5773482.jpg" />
        </div>
         <h3>Samsung 78JS9500 78" 198 Ekran [4K] SUHD Uydu Alıcılı 3D</h3> 
        <div class="links"> <span class="cartopen cartbutton">Sepete Ekle</span>
 <a href="#" class="cartdetail">İncele</a>

        </div>
    </li>
    <li>
        <div class="imagebutton"> <a href="#"></a>

            <img src="http://images.hepsiburada.net/assets/EE/500/EE_5773482.jpg" />
        </div>
         <h3>Samsung 78JS9500 78" 198 Ekran [4K] SUHD Uydu Alıcılı 3D</h3> 
        <div class="links"> <span class="cartopen cartbutton">Sepete Ekle</span>
 <a href="#" class="cartdetail">İncele</a>

        </div>
    </li>
    <li>
        <div class="imagebutton"> <a href="#"></a>

            <img src="http://images.hepsiburada.net/assets/EE/500/EE_5773482.jpg" />
        </div>
         <h3>Samsung 78JS9500 78" 198 Ekran [4K] SUHD Uydu Alıcılı 3D</h3> 
        <div class="links"> <span class="cartopen cartbutton">Sepete Ekle</span>
 <a href="#" class="cartdetail">İncele</a>

        </div>
    </li>
    <li>
        <div class="imagebutton"> <a href="#"></a>

            <img src="http://images.hepsiburada.net/assets/EE/500/EE_5773482.jpg" />
        </div>
         <h3>Samsung 78JS9500 78" 198 Ekran [4K] SUHD Uydu Alıcılı 3D</h3> 
        <div class="links"> <span class="cartopen cartbutton">Sepete Ekle</span>
 <a href="#" class="cartdetail">İncele</a>

        </div>
    </li>
    <li>
        <div...

CSS

body {
    font-family:Arial;
    font-size:.8em;
}
.productlist {
    margin:0;
    padding:0;
    list-style:none;
    width:100%;
}
.productlist > li {
    float:left;
    width:250px;
    height:330px;
    border:0px solid #efefef;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align:center;
    margin:5px;
}
.productlist > li > .imagebutton {
    width:250px;
    position:relative;
}
.productlist > li > .imagebutton > img {
    width:248px;
    height:248px;
    height:auto;
}
.productlist > li > .imagebutton > a {
    position:absolute;
    display:block;
    background:url('http://png-3.findicons.com/files/icons/2427/retina/64/zoom_in.png') no-repeat center center;
    width:250px;
    height:100px;
    z-index:999;
    width:80px;
    height:80px;
    left:85px;
    top:85px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity:0;
}
.productlist > li:hover > .imagebutton > a {
    position:absolute;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity:1;
}
.productlist > li > h3 {
    font-weight:100;
    margin:0;
    padding:0 10px;
    font-size:.95em;
    line-height:1.4em;
}
.productlist > li > .links {
    height:30px;
    position:relative;
    margin-top:10px;
    overflow:hidden;
}
.productlist > li > .links > .cartclose {
    display:block;
    width:124px;
    height:30px;
    background:red;
    position:absolute;
    left:0px;
    bottom:-50px;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-decoration:none;
    color:#fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    line-height:30px;
}
.productlist > li:hover > .links > .cartclose {
    bottom:0;
    -webkit-transition: all 0.5s...

JavaScript

$('.cartbutton').click(function () {
    var attrClass = $(this).attr("class");
    if ($(this).hasClass("cartclose")) {
        
        $(this).removeClass("cartclose");
        $(this).addClass("cartopen");
        $(this).text('Sepete Ekle');
        
    } else {
        
        $(this).removeClass("cartopen");
        $(this).addClass("cartclose");
        $(this).text('Sepetten Çıkart');
        
    }

});