0

I wonder if there is a way to delay the hover effect on background-size that goes from "cover" to "contain"? I have seen transition-delay works on backround-color and other properties but not backround-size. Any help will be appreciated. Thanks! 

div{
    display:inline-block;
    width: 100px;
    height: 100px;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    background-image: url("https://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: 0s background-size;
    transition-delay:1s;
}
div:hover{
    background-size: contain;
    background-color:red;
}

http://jsfiddle.net/rtku7sqk/

UPDATE Perhaps I should clarify that I want to delay the hover effect to happen but not extend the duration of the animation.

Similar to this... http://dabblet.com/gist/1498443

LATEST UPDATE

I figure out a way to fix this by using a mix of both CSS and javascript.

This way "background-size" works with "contain" and "cover"

$("#tmp").hover(function() {

    /* Mouse enter */
    var thisone = $(this);
    window.mytimeout = setTimeout(function() {
        thisone.addClass("mouseon");
    }, 1000);

}, function() {

    /* Mouse leave */
    clearTimeout(window.mytimeout);
    $(this).removeClass("mouseon");
});

http://jsfiddle.net/rtku7sqk/5/

unjc
  • 63
  • 1
  • 9
  • 1
    See this: http://stackoverflow.com/questions/8947683/css3-background-size-transition-animation-in-webkit-doesnt-work-bug-or-wron – Simply Craig Nov 26 '14 at 17:38
  • Tried adding the following, still doesn't work with background-size. 
        transition: background-size 2s ease-in;
    -moz-transition: background-size 2s ease-in;
    -ms-transition: background-size 2s ease-in;
    -o-transition: background-size 2s ease-in;
    -webkit-transition: background-size 2s ease-in;    
    transition:-delay 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1;
    -o-transition-delay: 1s;
    -webkit-transition-delay: 1s;
    – unjc Nov 26 '14 at 17:49
  • Ok, just remembered seeing it and thought it might help! Sorry it didn't work! Good luck :) – Simply Craig Nov 26 '14 at 17:50

3 Answers3

1

So, there's only one small little thing with your CSS, otherwise it'll work exactly as you expect.

You can't transition from non-numerical values

The values contain and cover for background-size aren't transition-able. Since they're non-numerical, you can't operate a CSS calculation on them.

If you change that to a numerical value like in the example below, it'll happen exactly how you expect it to:

Fiddle illustrating this example

Here are the changes to the CSS:

div{
    display:inline-block;
    width: 100px;
    height: 100px;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    background-image: url("https://i.stack.imgur.com/2OrtT.jpg");
    background-size: 100%; /* NOT `cover` anymore */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: 0s background-size;
    transition-delay: 1s;
}
div:hover{
    background-size: 20%; /* NOT `contain` anymore */
    background-color:red;
}
Community
  • 1
  • 1
Josh Burgess
  • 9,327
  • 33
  • 46
0

How about trying jQuery animate function? Without putting an extremely amount of effort, I think this is a good start for your problem. And of course, you can modify as you wish.

note: I understand you requested CSS but in this case, JQuery would be your best bet. However, if you are only requesting CSS, disregard this response. But I posted it because future visitors may be able to use this method and not have your restrictions. Cheers!

$( "div ").hover(function() {
    $( "img" ).animate({
      width: "100%",
    }, 1500 );
});

DEMO

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • I actually want to delay the hover effect to happen, but not delay the duration of animation. Similar to this... instead of delaying the background color change to happen, I want to delay background-size to go from cover to contain. http://dabblet.com/gist/1498443 – unjc Nov 26 '14 at 18:00
  • Thanks Lotusms anyway – unjc Nov 26 '14 at 18:05
  • No problem. My apologies. If I get some time later on I'll revisit this. Unless someone else got to it. Happy Thanksgiving – LOTUSMS Nov 26 '14 at 19:46
0

You could do something like this:

DEMO

If you want to work transition should use background-position with px something like:

div{
   background-position: 0px 0px;
}
div:hover{
   background-position: center center;
}
Josue Lopez
  • 71
  • 3