JSFiddle - React, Tailwind, and code Playground

by hoangtua

HTML

<div class="img-demo">
    <img width="250" src="http://i1.wp.com/webfaver.com/wp-content/uploads/2015/10/1377146863789.jpg?fit=600%2C600" alt="Doan Trang">
    <img width="250" src="http://i1.wp.com/webfaver.com/wp-content/uploads/2015/10/phuong-trinh-jolie-007-012022549.jpg?fit=600%2C600"/>   
</div>
<div class="control">
    <button id="effectOff">Không dùng kỹ thuật</button>
    <button id="effectOn">Áp dụng kỹ thuật</button>
</div>
<div class="news">
    <div class="article">
        <div class="thumb" style="background-image: url(http://i1.wp.com/webfaver.com/wp-content/uploads/2015/10/1377146863789.jpg?fit=600%2C600);"></div>
        <div class="title">Đoan Trang cười rạng rỡ!</div>
    </div>
    <div class="article">
        <div class="thumb" style="background-image:url(http://i1.wp.com/webfaver.com/wp-content/uploads/2015/10/phuong-trinh-jolie-007-012022549.jpg?fit=600%2C600);"></div>
        <div class="title">Phương Trinh Jolie đáng yêu</div>
    </div>
    <div class="article">
        <div class="thumb" style="background-image:url(http://i1.wp.com/webfaver.com/wp-content/uploads/2015/10/1377146863789.jpg?fit=600%2C600);"></div>
        <div class="title">Đoan Trang không còn đen như Chocolate nữa</div>
    </div>
    <div class="article">
        <div class="thumb" style="background-image:url(http://i1.wp.com/webfaver.com/wp-content/uploads/2015/10/phuong-trinh-jolie-007-012022549.jpg?fit=600%2C600);"></div>
        <div class="title">Phương Trinh Jolie lần đầu thổ lộ yêu đại gia Thanh Thùy</div>
    </div>
    <div class="article">
        <div class="thumb" style="background-image:url(http://i1.wp.com/webfaver.com/wp-content/uploads/2015/10/phuong-trinh-jolie-007-012022549.jpg?fit=600%2C600);"></div>
        <div class="title">Phương Trinh Jolie tuyên bố kiện webfaver vì tung tin đồn</div>
    </div>
        <div class="article">
        <div class="thumb"...

CSS

.img-demo, .control {
    margin-bottom: 10px;
}
.news{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #e6e6e6;
}
.article {
    width: 200px;
    height: 220px;
    display: inline-block;
    padding: 5px;
    margin-left: 10px;
    vertical-align:top;
}
.thumb {
    width: 200px;
    height: 150px;
    background-color: #3e3e3e;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

JavaScript

$(function(){
	$("#effectOff").click(function(){
    	$(".thumb").each(function(index, ele){
        	$(ele).css({
            	"background-size": "auto auto",
                "background-position":"top left"
            })
        })
    })
    $("#effectOn").click(function(){
    	$(".thumb").each(function(index, ele){
        	$(ele).css({
            	"background-size": "cover",
                "background-position":"center center"
            })
        })
    })
})