CODEWITHSUNDEEP
htmlcss
gab
gab

Reputation: 43

How to get background-size:cover zoomed on hover

These are the codes I 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 I would like the background image of .thumbha to zoom when you hover on it. How do I do that? Anybody could help me?

Upvotes: 1

Views: 408

Answers (3)

mihkov
mihkov

Reputation: 1189

.thumbha:hover { background-size: 300px 300px;}
        .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>

Upvotes: 0

James Mallon
James Mallon

Reputation: 1127

You must add an extra CSS element something like this:

.thumbha:hover {
background-size:150%;
}

changing the value of 150% to whatever suits you.

Upvotes: 1

Raf
Raf

Reputation: 352

try 

.thumba:hover { 
 -webkit-transform:scale(1.2); 
-moz-transform:scale(1.2); 
-ms-transform:scale(1.2); 
-o-transform:scale(1.2); 
transform:scale(1.2); 
 }

and add animation to .thumba for smooth zoom

.thumba { 
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}

you can set scale to whatever value you need

Upvotes: 0

Related Questions