"Multiple Backgrounds (hover effect)"
Bootstrap 3.3.0 Snippet by iwebdesigner

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Multiple Backgrounds (hover effect)</h2> <div class="space"></div> </div> </div>
.space{ /* Pass a comma separated list of backgrounds: */ background:url('http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png') no-repeat center 70px, url('http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg') no-repeat bottom center; width:200px; height:200px; margin: 0 auto; border-radius:3px; /* Animate the positions of both of the backgrounds */ transition:background-position 1s; } .space:hover{ /* The same goes for properties like background-position and repeat */ background-position:35% 20px, top right; }

Related: See More


Questions / Comments: