JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="well" style="margin-bottom:0px;background-color:black;">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner">
<div class="item active">
<div class="row" style="margin-left:8.3333%">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="graficki-dizajn" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="stampa-svih-formata" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="web-dizajn" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="kreativno-pisanje" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="pr" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="izrada-tv-i-radio-reklama" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="media-buying" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="3d-projektovanje" class="img-circle img-responsive...
CSS
.img-responsive {
max-width: 90%;
}
.img-responsive:hover {
max-width: 100%;
}
.well {
height: 60px;
}
JavaScript
$(document).ready(function(){
$("#graficki-dizajn").hover(function() {
$("#graficki-dizajn").attr("src","http://placehold.it/161x143");
}, function() {
$("#graficki-dizajn").attr("src","http://placehold.it/108x100");
});
$("#stampa-svih-formata").hover(function() {
$("#stampa-svih-formata").attr("src","http://placehold.it/161x143");
}, function() {
$("#stampa-svih-formata").attr("src","http://placehold.it/108x100");
});
$("#web-dizajn").hover(function() {
$("#web-dizajn").attr("src","http://placehold.it/161x143");
}, function() {
$("#web-dizajn").attr("src","http://placehold.it/108x100");
});
$("#kreativno-pisanje").hover(function() {
$("#kreativno-pisanje").attr("src","http://placehold.it/161x143");
}, function() {
$("#kreativno-pisanje").attr("src","http://placehold.it/108x100");
});
$("#pr").hover(function() {
$("#pr").attr("src","http://placehold.it/161x143");
}, function() {
$("#pr").attr("src","http://placehold.it/108x100");
});
$("#izrada-tv-i-radio-reklama").hover(function() {
$("#izrada-tv-i-radio-reklama").attr("src","http://placehold.it/161x143");
}, function() {
$("#izrada-tv-i-radio-reklama").attr("src","http://placehold.it/108x100");
});
$("#media-buying").hover(function() {
$("#media-buying").attr("src","http://placehold.it/161x143");
}, function() {
$("#media-buying").attr("src","http://placehold.it/108x100");
});
$("#3d-projektovanje").hover(function() {
$("#3d-projektovanje").attr("src","http://placehold.it/161x143");
}, function() {
$("#3d-projektovanje").attr("src","http://placehold.it/108x100");
});
$("#promocije-i-manifestacije").hover(function() {
$("#promocije-i-manifestacije").attr("src","http://placehold.it/161x143");
}, function()...