CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alfred Woo
Alfred Woo

Reputation: 716

jQuery - background-size: cover + some percentage

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.

Upvotes: 1

Views: 1107

Answers (4)

Asons
Asons

Reputation: 87191

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>

Upvotes: 2

Anj D
Anj D

Reputation: 92

$(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.

Upvotes: 0

frnt
frnt

Reputation: 8795

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>

Upvotes: 2

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

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>

Upvotes: 3

Related Questions