0

Here's my JS FIFFLE https://jsfiddle.net/uo34ru7d/28/

I would like to make a scale effect hover on my div, but it doesn't work well with the script I'd use. You will see better on the JS FIDDLE.

HTML 

<div> </div>
<div> </div>
<div> </div>

<script src="https://raw.githubusercontent.com/nk-o/jarallax/master/jarallax/jarallax.js"></script>

CSS

div {
  height:200px;
  width:400px;
  background-image:url("http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg");
  margin:50px;
  position: relative;
  background-repeat: no-repeat;
    background-position: 50% 50%;
  background-size: cover;
   transition: scale .3s ;

}


div:hover {
     transform: scale(0.95);
}

THE JQUERY SCRIPT

https://github.com/nk-o/jarallax

user3870112
  • 311
  • 3
  • 18
  • i changed transition property - now it works smoother, nuffing to do with parallax effect - https://jsfiddle.net/uo34ru7d/29/ – GL.awog Jan 16 '17 at 12:31
  • The parallax effect looks strange when you scroll... See my first JS FIDDLE (https://jsfiddle.net/uo34ru7d/28/), when you scroll it's not the same effect. – user3870112 Jan 16 '17 at 14:40
  • They are a conflict with my script which use a transform propriety. Maybe they are an alternative solution to make the scale effect without the "scale" propriety ? – user3870112 Jan 16 '17 at 14:51

0 Answers0