Sanjeev K Sanjeev K - 4 months ago 10
HTML Question

Background image hover transition not working in chrome

CSS Transition is not working in chrome on image hover, please check the JSFiddle example

HTML

<div class="screenThum">
<a href="#" class="portfolio" style="background-image:url(http://toffeeglobal.com/images/mockup1.png);"></a>
</div>


CSS

.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}

.screenThum .portfolio:hover{
opacity:0.9;
background-size:120%;
}


I have tried with previous SO answers but didn't worked with my code, not sure whats wrong?

thanks

Answer

If you are comfortable with it then you can use transform:scale to get same effect. Edited: taking the reference of @Alexandre Beaudet

.screenThum{
    overflow: hidden;
    width: 350px;
    height: 250px;
}
.screenThum .portfolio{
  width:350px; 
  display:block; 
  height:100%; 
  background-size:100%; 
  background-repeat:no-repeat; 
  height:250px; 
  position:relative; 
  opacity:0.4; 
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -ms-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;}

.screenThum .portfolio:hover{
    opacity:0.9; 
   -moz-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);   
    }
<div class="screenThum"><a href="#" class="portfolio" style="background-image:url(http://toffeeglobal.com/images/mockup1.png);"></a></div>

Comments