html - How to get background-size:cover zoomed on hover -
these codes have:
.thumbha { width: 350px; height: 350px; background-position: top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin-bottom: 20px; margin-right: 20px; float:left; position: relative; z-index:1; } .ombra { background-image:url(http://www.lovatotribe.com/test/wp-content/themes/ggi1/media/img/ombra.png); width: 100%; height:100%; position:absolute; top:0; z-index: -1 }
<div class="thumbha" style="background-image:url(http://www.lovatotribe.com/wp-content/uploads/2015/08/confident-shoot.jpg)"> <div class="ombra"></div> </div>
so background image of .thumbha zoom when hover on it. how do that? me?
you must add css element this:
.thumbha:hover { background-size:150%; }
changing value of 150% whatever suits you.
Comments
Post a Comment