Bootstrap 3.2
HTML
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="http://www.clker.com/cliparts/N/y/j/v/U/T/green-a-md.png" class="img-responsive supportimage displaynone" />
<img src="https://www.havefunteaching.com/wp-content/uploads/2013/06/letter-a.png" class="img-responsive seoimage displaynone" />
<img src="http://www.runlounge.com/wp-content/uploads/2014/08/A.jpg" class="img-responsive brandingimage displaynone" />
<img src="http://3.bp.blogspot.com/-3aPQIa6qALA/TZXW_YdmWTI/AAAAAAAAX7E/RNAMMoj05fs/s400/A.jpg" class="img-responsive mobileimage displaynone" />
<img src="http://www.askingmatters.com/wp-content/uploads/2012/07/1242257617140579084NYCS-bull-trans-A.svg_.med_.png" class="img-responsive optimizationimage displaynone" />
<img src="http://englishschooljapan.com/wp-content/uploads/2013/04/a_clipart.jpg" class="img-responsive commerceimage displaynone" />
</div>
</div>
<div class="row">
<div class="col-lg-4 brandingblock hoverwhite hoveractive">
<div class="col-lg-2">
<i class="fa fa-star fa-spin customicons"></i>
</div>
<div class="col-lg-10">
<p class="helpertextbig">Branding</p>
<p class="helpermaintext">Social media, logo design, color recognition - we do it all. A unifying web presence serves as the foundation for a succesful web portal where customers can discover and connect with more information about your business.</p>
</div>
</div>
<div class="col-lg-4 mobileblock hoverwhite">
<div class="col-lg-2">
<i class="fa fa-mobile-phone customicons"></i>
</div>
<div...
CSS
.hoverwhite {
padding:15px;
}
.hoverinactive {
background-color: transparent;
}
.todisplay {
display: block !important;
}
.todisplayblock {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.05);
}
.tonotdisplay {
display:none !important;
}
.displaynone {
display: none;
}
JavaScript
jQuery(document).ready(function() {
jQuery('.brandingimage').addClass('todisplay');
jQuery('.seoblock').mouseover(function() {
jQuery('.seoimage').addClass('todisplay');
jQuery('.brandingimage').removeClass('todisplay');
jQuery('.mobileimage').removeClass('todisplay');
jQuery('.optimizationimage').removeClass('todisplay');
jQuery('.supportimage').removeClass('todisplay');
jQuery('.commerceimage').removeClass('todisplay');
jQuery('.seoblock').addClass('todisplayblock');
jQuery('.brandingblock').removeClass('todisplayblock');
jQuery('.mobileblock').removeClass('todisplayblock');
jQuery('.optimizationblock').removeClass('todisplayblock');
jQuery('.supportblock').removeClass('todisplayblock');
jQuery('.commerceblock').removeClass('todisplayblock');
});
jQuery('.supportblock').mouseover(function() {
jQuery('.seoimage').removeClass('todisplay');
jQuery('.brandingimage').removeClass('todisplay');
jQuery('.mobileimage').removeClass('todisplay');
jQuery('.optimizationimage').removeClass('todisplay');
jQuery('.supportimage').addClass('todisplay');
jQuery('.commerceimage').removeClass('todisplay');
jQuery('.seoblock').removeClass('todisplayblock');
jQuery('.brandingblock').removeClass('todisplayblock');
jQuery('.mobileblock').removeClass('todisplayblock');
jQuery('.optimizationblock').removeClass('todisplayblock');
jQuery('.supportblock').addClass('todisplayblock');
jQuery('.commerceblock').removeClass('todisplayblock');
});
jQuery('.brandingblock').mouseover(function()...