SO - 25839989

by Arun P Johny

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 images">
            <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 block-trigger" data-img=".brandingimage">
            <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 block-trigger" data-img=".mobileimage">
            <div class="col-lg-2">
                <i...

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(function($) {
	$('.brandingimage').addClass('todisplay');
    var $imgs = $('.images img');
	$('.block-trigger').mouseover(function() {
        var $img = $($(this).data('img')).addClass('todisplay');
        $imgs.not($img).removeClass('todisplay');
	});
});