jQuery - background-size: cover + some percentage

Question

I need to zoom background image smoothly when hovered, and to prevent making any empty space in div, I used background-size: cover attribute. But this thread says animation is not allowed in keyword values. So I'm going to use jQuery to implement the animation.

But I can't figure out what to set new background-size value in jQuery when hovered. I want to zoom 10% more, and background-size: cover+10% won't work of course. What should I provide to achieve what I want?

Here is my current code.

<style type="text/css">
    #slide_sub {display: table; width: 100%}
    #slide_sub div.image {height: 300px; width: 50%; display: table-cell; background-size: cover; background-position: center; background-repeat: no-repeat; transition: 0.2s; vertical-align: middle; padding: 24px; box-sizing: border-box; overflow: hidden; position: relative;}
    #slide_sub div.image:hover {background-size: cover 110%; transition: 0.2s}

    #slide_sub div.text {width: 100%}
</style>

<div class="image" style="background-image: url('a.png')">
    <div class="text">
        <p class="title">TITLE</p>
        <p class="subtitle">SUBTITLE</p>
    </div>
</div>

Thank you in advance.

Answer 1

You can try this.

 .wrap { width: 200px; height: 200px; position: relative; overflow: hidden; color:#fff; } .bg_image { position: absolute; height: 100%; width: 100%; background: url("http://placekitten.com/g/500/500"); background-size: cover; z-index: -1; transition: transform .3s; } .wrap:hover .bg_image { transform: scale(1.5) } 

 <div class=wrap> <div class="bg_image"></div> <div class="text"> <p class="title">TITLE</p> <p class="subtitle">SUBTITLE</p> </div> </div> 

Answer 2

You could use mouseenter and mouseleave method here of jQuery to just animate background images as below,

mouseenter() - Fires assigned styling, when mouseenter an element. mouseleave() - Fires assigned styling, when mouseleave an element.

 $(document).ready(function(e){ $(".image").on("mouseenter",function(){ $(this).css({ "background-size" : "120% 120%", "transition" :"background-size 1s ease" }); }); $(".image").on("mouseleave",function(){ $(this).css({ "background-size" : "100% 100%", "transition" :"background-size 1s ease" }); }); }); 

 .image{ background:url(" http://placehold.it/350x150") no-repeat; background-size:100% 100%; overflow:hidden; width:100%; height:400px; border:1px solid #111; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="image"> <div class="text"> <p class="title">TITLE</p> <p class="subtitle">SUBTITLE</p> </div> </div> 

Answer 3

A pseudo element would be prefect for this, so you can keep the existing markup.

Combine it with transform and you get this

 div.image { height: 300px; width: 50%; display: table-cell; vertical-align: middle; padding: 24px; box-sizing: border-box; overflow: hidden; position: relative; } div.image::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.2s; } div.image:hover::before { transform: scale(1.25); /* 25% increase */ } div.text { position: relative; /* so text stay ontop of image */ } 

 <div class="image" style="background-image: url(http://lorempixel.com/200/200/nature/1/)"> <div class="text"> <p class="title">TITLE</p> <p class="subtitle">SUBTITLE</p> </div> </div> 

Answer 4

$(function(){
   $('.image').hover(function(){
   $(this).animate({height: '500px', opacity: '0.8'}, "slow");
   $(this).animate({width: '500px', opacity: '0.8'}, "slow");
   });
});

I think animation can be applied like this. Hope this is what u asked.