JSFiddle - React, Tailwind, and code Playground
by Mawel Don
HTML
<div class="append">
<span>
<div>
<a href="/voyage/ameriques/etats-unis/boston/">
<img class="imgLittle" src="http://data4.voyagesarabais.com/i/photos/custom/900/500/5/159431.jpg"/>
Boston
</a>
</div>
<div>
<a href="/voyage/ameriques/etats-unis/chicago/">
<img class="imgLittle" src="http://www.unbattementdaile.net/wp-content/uploads/2010/04/21-04-2010-23-12-35.png"/>
Chicago
</a>
</div>
<div>
<a href="/voyage/ameriques/etats-unis/las-vegas/">
<img class="imgLittle" src="http://www.voyage-unique.com/fr/uploads/etats-unis-las-vegas-la-nuit.jpg"/>
Las vegas
</a>
</div>
<div>
<a href="/voyage/ameriques/etats-unis/los-angeles/">
<img class="imgLittle" src="http://photos.nouvelles-frontieres.fr/Produits/USACT029_Los-Angeles.jpg"/>
Los angeles
</a>
</div>
<div>
<a href="/voyage/ameriques/etats-unis/miami/">
<img class="imgLittle" src="http://static.mensup.fr/photos/23094/resorts-world-miami.jpg"/>
Miami
</a>
</div>
</span>
<span>
<div>
<a href="/voyage/ameriques/etats-unis/new-york/">
<img class="imgLittle" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/New_York_in_United_States.svg/langfr-280px-New_York_in_United_States.svg.png"/>
New york
</a>
</div>
<div>
<a href="/voyage/ameriques/etats-unis/nouvelle-orleans/">
<img class="imgLittle" src="http://idata.over-blog.com/1/24/29/79/Nouvelle-Orl-ans-article1/usa-states-and-capital-map.gif"/>
Nouvelle orleans
</a>
</div>
<div>
<a href="/voyage/ameriques/etats-unis/orlando/">
<img class="imgLittle"...
CSS
.imgLittle
{
width: 100%;
height: auto;
margin:auto;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.append {
display: table;
border-collapse: separate;
border-spacing:10px;
}
.append a{
color: #ec9711;
}
.append span {
display: table-row;
}
.append div {
display: table-cell;
text-align:center;
max-width:116px;
}
JavaScript
$('img').each(function() {
newLink = decodeURIComponent($(this).attr('src'));
$(this).attr('src',newLink)
})