I'm trying to imitate Twitter's notification animation
This is what i came up with so far:
$('button').click(function() {
$('#left').css('width', '400px');
$('#right').css('width', '400px');
});
.wrapper {
position: relative;
min-height: 50px;
}
.left {
position: absolute;
left: 0;
height: 50px;
background: #00AEEF;
}
.right {
position: absolute;
right: 0;
height: 50px;
background: #00AEEF;
}
.banner {
width: 0%;
overflow: hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="wrapper">
<div id="left" class="banner left"></div>
<div id="right" class="banner right"></div>
</div>
<div style="margin: 10px;">
<button>start animation</button>
</div>
</div>
But using 2 different divs for left and right animation feels like a hack.
Is there a nicer built-in css animation of that type (to be used on a single div)?
Sliding doors effect (only)
(see below for a full-effect demo)
You could animate the background-position of two linear-gradients placed in a single element (so you wouldn't even need to use two more empty elements for styling purpose) e.g.
div {
background:
linear-gradient(to left, #00AEEF 50%, transparent 0),
linear-gradient(to right, #00AEEF 50%, transparent 0);
background-position: 50vw 0, -50vw 0;
background-repeat: no-repeat;
height: 50px;
transition: background-position 1s;
}
:checked + div {
background-position: 0 0, 0 0;
}
Just set a class via js to trigger the transition (for the sake of simplicity I've activated the effect with a :checked pseudoclass)
Codepen demo
You could also obtain the same effect by the opposite animation: if you place a white gradient over a blue background-color you could animate just the background-size of the gradient like so
div {
background: #00AEEF linear-gradient(to right, #fff, #fff);
background-position: 50% 0;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 50px;
transition: background-size 1s;
}
:checked ~ div { background-size: 0 100%; }
Codepen demo
Comparing the two approaches I personally prefer the last one (less code to type, one single gradient to be animated and it seems smoother. Furthermore, the second demo prevents an annoying rounding issue that sometimes happens in the first one, when repositioning the two gradients occurs, as you can see from the screenshot below)
Full effect (with all the animations/transitions)
To recreate the full effect of this notification, markup and style should of course slightly change: starting from the last demo, I moved the main effect on the <a> element inside the wrapper and I inserted other effects, like the # pulsing with an animation and the final slide down after 5 seconds.
The right arrow is made by the unicode symbol U+3009 and it is placed as the content of the a::after pseudoelement
Note: all properties are unprefixed. Add prefixes where necessary
Codepen Demo (Full effect)
Markup
<div class="notification">
<span>#</span>Miro mentioned you
</div>
CSS (embedding Lato font from google fonts)
* {
font : 1rem "Lato", Arial;
box-sizing : border-box;
}
.notification {
position : relative;
overflow : hidden;
font-weight : 100;
font-size : 1.5rem;
}
.notification a {
display : block;
padding : 1em 3em 1em 2.25em;
width : 100%;
font-size : inherit;
font-weight : inherit;
color : transparent;
background : #00AEEF linear-gradient(to right, #fff, #fff);
text-decoration : none;
background-position : 50% 0;
background-repeat : no-repeat;
background-size : 100% 100%;
}
/* The at-sign: I've also tried to use :first-letter but it
* is unreliable when the first char is not a letter or a digit
*/
.notification a span {
position : absolute;
line-height : 1;
top : 50%;
left : 50%;
color : #fff;
font-weight : bold;
transform : translate(-50%, -50%) scale(0);
transform-origin : 50% 50%;
}
/* The arrow */
.notification a:after {
position : absolute;
content : "\3009";
right : 1em;
top : 50%;
transform : translateY(-50%);
}
/* sliding doors effect, color change and final slide down
* all with proper delays
*/
:checked ~ .notification a {
transition: background-size .2s, color .33s 1s, transform 1s 5s;
transform: translateY(100%);
background-size: 0 100%;
color: #fff;
}
/* pulsing and moving the #-sign */
:checked ~ .notification a span {
animation: pulse-at .66s ease-in-out .33s forwards;
}
#keyframes pulse-at {
0% { transform: scale(0) translate(-50%, -50%); }
20% { transform: scale(1.1) translate(-50%, -50%); }
25% { transform: scale(1) translate(-50%, -50%); }
40% { transform: scale(1) translate(-50%, -50%); left: 50%; }
100% { transform: scale(1) translate(0, -50%); left: 1em; }
}
Final result
Related
I'm creating a portfolio site that has a filterable infinite wall gallery underneath a hero image that slides off to the right when you click (and slides back on screen with another click). I'm having trouble though, getting this sliding image to work correctly. The photo gallery will be a headache for another day.
There will be a small right arrow button on the left side. To make this slider more obvious I'd like to animate a slight right-left bounce of the image when you hover over this image, then when you click the arrow (or would probably be better to click anywhere on the pic) it slides off screen to the right, revealing this photo gallery underneath. Then you can slide this image back over the gallery with another arrow button on the right.
I found a solution that's most of the way there, using a label input checkbox with a transition property to get it to show as default and animate off screen with the arrow click, but it slides down, not right. It's a little wonky, and I feel like it could be simplified to some degree.
I also tried changing the input from a checkbox to a button and doing animation keyframes, but the animation only played on refresh, and disappears/reappears instantly with no animation with a button click. I may have just targeted the wrong element though.
This is a very rough ideas as to what I'm going for, just thrown together in XD. Final design will be much more pleasant. I forgot the arrow on the second screen, but there'd be one on the right side of the screen to slide that hero image back over the gallery.
If this could be done in just HTML and CSS that'd be great, but if I need to use js or jQuery to do this properly then that's fine.
This is what I have currently that needs some serious work:
<section>
<div class="pv-wrapper">
<h1>PHOTO + VIDEO</h1>
<div class="btn-container">
<ul>
<li class="automotive">Automotive</li>
<li class="video">Video</li>
<li class="portraits">Portraits</li>
<li class="landscapes">Landscapes</li>
</ul>
</div>
<label class="slider">
<img class="arrow" src="images/right-arrow.png">
<input type="checkbox" name="">
<div class="photo-slider"></div>
</label>
</div>
</section>
.pv-wrapper {
width: 100%;
height: 750px;
position: relative;
border-left: 100px solid orange;
color: rgba(0, 0, 0, 0.5);
font-size: small;
display: inline-block;
}
.pv-wrapper h1 {
font-size: 50px;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 225px;
left: -40px;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
.btn-container ul {
display: inline-block;
padding: 50px 0 0 50px;
font-family: 'Poppins-Light';
font-size: 40px;
line-height: 120%;
}
.btn-container ul li a {
text-decoration: none;
color: black;
}
.btn-container ul li a:hover {
color: #68C8E5;
transition: 0.4s ease;
}
.slider {
margin-left: -20px;
}
.arrow {
width: 20px;
margin-top: 90px;
}
.slider > input {
display: none;
}
.slider > input:not(:checked) ~ .photo-slider {
top: 100px !important;
}
.photo-slider {
position: fixed;
height: 750px;
width: 100%;
top: 100%;
left: 100px;
background: url(../images/rs3-bg.jpg);
background-size: cover;
background-position: 75% 50%;
transition: 0.6s;
}
[1]: https://i.stack.imgur.com/nob93.jpg
Got it to work thanks to #MonsterBasket! Had to make a couple slight changes but this is what worked, including the bounce on hover:
.slider {
margin-left: -20px;
cursor: pointer;
display: inline-block;
}
.photo-slider {
position: fixed;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-delay: 0.5s;
}
.photo-slider:hover {
animation-name: bounce;
}
#keyframes bounce {
0%, 100%, 20%, 50%, 80% {
transform: translateX(0)
}
40% {
transform: translateX(30px)
}
60% {
transform: translateX(15px)
}
}
.slider > input {
display: none;
}
.slider > input:not(:checked) ~ .photo-slider {
top: 100px;
}
.slider > input:checked ~ .photo-slider {
left: calc(100% - 60px);
top: 100px;
}
.arrow {
width: 60px;
margin-top: 345px;
}
.slider > input:not(:checked) ~ .photo-slider .arrow {
transform: rotate(-360deg);
transition: 1s;
}
.slider > input:checked ~ .photo-slider .arrow {
transform: rotate(-180deg);
transition: 1s;
}
.photo-slider {
position: fixed;
height: 750px;
width: 100%;
top: 100%;
left: 100px;
background: url(../images/rs3-bg.jpg);
background-size: cover;
background-position: 75% 50%;
transition: 0.6s;
}
The reason you need a checkbox rather than a button is because pure CSS doesn't record state. So even though you can make a button play an animation on click, you can't set it as "clicked" so that you can then "unclick" it.
In .slider > input:not(:checked) ~ . photo-slider you're saying "when this is not clicked, be 100px from the top. .photo-slider is less specific, so there you're saying "when the above rule doesn't apply, be 100% from the top (off the bottom of the screen". All the other attributes aren't specified in the above rule, so they'll always be applied.
To make it slide off to the right, you just need to play with where and how you list those properties. I don't know exactly how you want to position it within the rest of your page, but I think this should get you most of the way there:
.slider > input:not(:checked) ~ .photo-slider {
left: 0px; /* This will put it hard left when unchecked, you also don't need !important, as this rule is more specific than the one below.*/
}
.photo-slider {
position: fixed;
height: 750px;
width: 100%;
top: 100px;
left: calc(100% - 20px); /* this will leave 20px sticking out from the right side of the screen */
background: url(../images/rs3-bg.jpg);
background-size: cover;
background-position: 75% 50%;
transition: 0.6s;
}
You can probably also change this:
<label class="slider">
<img class="arrow" src="images/right-arrow.png">
<input type="checkbox" name="">
<div class="photo-slider"></div>
</label>
To this:
<label class="slider">
<input type="checkbox" name="">
<div class="photo-slider">
<img class="arrow" src="images/right-arrow.png">
</div>
</label>
Which will keep the arrow on top of your hero image. You'll have to figure out the CSS to position it yourself, but then you could do this to change the direction of the arrow:
.slider > input:not(:checked) ~ .photo-slider .arrow {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
As for making it bounce on hover, this explains perfectly. Your CSS rule would be .photo-slider:hover.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have a red box as the element to animate.
Here is a simple representation of how I want to animate the red box.
Here is a try but as you see the anchor point of the movement is at the left of the box no the center as I wish to be:
.yo-yo {
display: block;
position: absolute;
height: 50px;
width: 200px;
background: red;
transform-origin: 50% 50%;
animation: yo-yo 0.5s infinite alternate; /* Animation speed and type */
}
/* Animation beginning and ending */
#keyframes yo-yo {
from { left: 0 }
to { left: 20px }
}
<span class="yo-yo"></span>
Here is the script tag of that specific version of TweenMax:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
Your making it too complicated. Just use the percentages in #keyframes, and use transform: translateX(number) like so:
#keyframes yo-yo {
0% {transform: translateX(0); }
25% { transform: translateX(-20px); }
75% { transform: translateX(20px); }
100% { transform: translateX(0px); }
}
You should try to use transform instead of giving positions. For a better understanding, checkout this link CSS translation vs changing absolute positioning values.
You need to use the progress instead of just simply declaring a from and to in the keyframes rule
Something like this would suffice. If you want a repeating animation then just add a infinite before linear
html,
body {
padding: 0;
margin: 0;
outline: none;
border: 0;
}
.yo-yo {
display: block;
position: absolute;
height: 50px;
width: 200px;
background: red;
transform-origin: 50% 50%;
animation: yo-yo 2s linear;
/* Animation speed and type */
animation-timing-function: ease-in-out;
}
/* Animation beginning and ending */
#keyframes yo-yo {
0% {
left: 0px;
}
25% {
left: -100px;
}
50% {
left: 0px;
}
75% {
left: 100px;
}
100% {
left: 0px;
}
}
<span class="yo-yo"></span>
You can use animation with infinite normal linear. If you remove infinite from animation then it will stop after one iteration. Your animation is divided into 5 parts. 0, all the way right, 0, all the way left, 0. So start changing the left position from 0%, 25%, 50%, 75% and 100%.
.yoyo-container{
background-color: #DEEBF7;
padding:12px;
position: relative;
width: 200px;
height: 16px;
margin: 0 auto;
}
.yo-yo {
display: block;
position: absolute;
height: 16px;
width: 200px;
background: red;
transform-origin: 50% 50%;
animation: yo-yo 2s infinite normal linear; /* Animation speed and type */
}
/* Animation beginning and ending */
#keyframes yo-yo {
0% {transform: translateX(0); }
25% { transform: translateX(50%); }
50% { transform: translateX(0); }
75% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
<div class="yoyo-container">
<span class="yo-yo"></span>
</div>
div {
height: 41.4vmin;
width: 30vmin;
margin: 0.7vmin;
border-radius: 1.3vmin;
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
background-size: contain;
}
#keyframes example {
0% {}
35% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");}
36% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");}
100% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");transform: rotateY(160deg);}
}
div:hover {
animation-fill-mode: forwards;
animation-name: example;
animation-duration: 1s;
}
<div></div>
I don't use keyframes because i need set unique url for every animation. If i do this then need creator more 100 keyframes.
And i want to do this because with transition can set different url method js. But this not look how i want.
div {
height: 41.4vmin;
width: 30vmin;
margin: 0.7vmin;
border-radius: 1.3vmin;
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
background-size: contain;
transition:
/* step 1 */
transform 1s,
/* step 2 */
background 0.0s 0.5s;
}
div:hover {
transform: rotateY(160deg);
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
}
<div></div>
My solution, you can create two elements front and back that lies inside card-container element and animate accordingly:
$(document).ready(function () {
$('.card-container').click(function () {
$(this).toggleClass('clicked');
});
});
.card-container {
position: relative;
overflow: hidden;
height: 41.4vmin;
width: 30vmin;
margin: 0.7vmin;
}
.card-container > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 1.3vmin;
transition: transform 1s, background 0.0s 0.5s;
transform-style: preserve-3d;
}
.card-container .front {
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
background-size: contain;
background-color: black;
transform: rotateY(0deg);
}
.card-container .back {
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
background-size: contain;
transform: rotateY(180deg);
}
.card-container.clicked .front {
transform: rotateY(180deg);
}
.card-container.clicked .back {
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-container">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="card-container">
<div class="front"></div>
<div class="back"></div>
</div>
Move the transition to the hover state and adjust the delay and you will have exactly the same thing:
div.card {
height: 41.4vmin;
width: 30vmin;
margin: 0.7vmin;
border-radius: 1.3vmin;
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
background-size: contain;
}
div.card:hover {
transform: rotateY(160deg);
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
transition: transform 1s linear, background 0s 0.5s linear;
}
<div class="card"></div>
Why do you need 100 URL's to do this? You only need the front of the card image and the back of the card image.
img {
width:100%;
border:1px solid #e0e0e0;
border-radius:1vw;
}
.container {
/* Position and Size the Container */
position: absolute;
top: 17%;
bottom:0; /* Needed to keep the overall height larger than the card. */
left: 20%;
width: 25%;
/* Will inherit to children only (not all descendants) */
perspective: 900px;
}
#card .front {
/* Flip the front side of the card by rotating it around the y-axis. */
transform: rotateY(180deg);
}
#card:hover {
/* Rotate the card as a whole: */
transform: rotateY(180deg);
}
#card div {
/* Forces both elements to come out of the normal flow and occupy the same space on the page. */
position: absolute;
/*
The backface-visibility CSS property determines whether or not the back
face of the element is visible when facing the user. The back face of
an element is always a transparent background, letting, when visible,
a mirror image of the front face be displayed. If your foreground element
is opaque, this property may not need to be set.
*/
backface-visibility: hidden;
}
#card {
/*
Indicates that the children of the element should be positioned in the 3D-space.
And, pass any inherited perspective along to children.
*/
transform-style: preserve-3d;
/*
Changes to the transform property should take 1 second to
change from their current value to their new value.
*/
transition: transform 1s cubic-bezier(.75,1.25,.5,1.25);
}
<!-- The "container" will be the 3D space for us to work in. -->
<div class="container">
<!-- The "card" is the single entity that we will manipulate. -->
<div id="card">
<!-- The child elements make up pieces of the overall object.-->
<div class="front"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Ace_of_spades.svg/2000px-Ace_of_spades.svg.png"></div>
<div class="back"><img src="https://thumb1.shutterstock.com/display_pic_with_logo/3172829/620603528/stock-vector-ace-of-spades-with-eyel-vintage-design-t-shirts-620603528.jpg"></div>
</div>
</div>
You'll need to use a transition-timing-function with palindromic timing, so the card image changeover can always be in the middle. Examples of this include linear or ease-in-out (incorporated below).
Note that some browsers don't support transition on background-image though, so you may need to approach this effect differently for it to work in IE, for example.
div {
height: 41.4vmin;
width: 30vmin;
margin: 0.7vmin;
border-radius: 1.3vmin;
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
background-size: contain;
transition: transform 1s ease-in-out, background 0s .5s;
}
div:hover {
transform: rotateY(160deg);
background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
}
<div></div>
How do I animate a <div> to expand to fit the screen upon clicking. All while staying in fixed position, then revealing the contents of that <div>
Image:
Set a CSS3 transition to your element.
Create a class that makes your element 100vw and 100vh (viewport width height units)
Add that class on click
$("#box").on("click", function() {
$(this).toggleClass("fullScreen");
});
html, body{height:100%;margin:0;}
/* YOUR BOX */
#box{
position: fixed;
overflow: hidden; /* in order to contain content */
/* The initial styles: */
border-radius: 25px;
background: red;
left:50px; bottom:50px;
width: 50px;
height: 50px;
/* TRANSITION TO THE RESCUE */
transition: 0.7s;
-webkit-transition: 0.7s;
}
/* ADD THIS CLASS WITH JS */
#box.fullScreen{
/* Your override styles: */
border-radius: 0;
background: gold;
left:0; bottom:0;
width: 100vw;
height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">CLICK</div>
You can use transform: scale( ) to scale the full screen box proportionally down and up. Scaling also affects the content of the box. The small version of the box then has the same aspect ratio as the full screen box.
Example
$("#box").on("click", function() {
$(this).toggleClass("fullScreen");
});
html, body{height:100%;margin:0;}
/* YOUR BOX */
#box{
position: fixed;
cursor: pointer;
background-color: red;
/* make the box full screen */
width: 100vw; /* IE9+ */
height:100vh; /* IE9+ */
top: 0;
left: 0;
/* scale it down to 0.1 (10%) initially,
make an offset from bottom left */
-ms-transform: translate(50px, -50px) scale(0.1); /* IE9 */
-ms-transform-origin: left bottom; /* IE9 */
transform: translate(50px, -50px) scale(0.1);
transform-origin: left bottom;
/* smooth transition (IE10+) */
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
/* ADD THIS CLASS WITH JS */
#box.fullScreen {
/* Your override style:
remove offset, scale it to 1 (100%) */
-ms-transform: translate(0px, 0px) scale(1); /* IE9 */
transform: translate(0px, 0px) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>click the box</div>
<div id="box">your content</div>
I want a div element to stretch across that is 33% width with a background image done in css
background-image:url(); background-size:cover
How do I animate a zoom-in of the image of the background in the div on mouseover or mouseneter, is there a plugin that can do this? The background div has to use background-size:cover because it's an elastic page.
I don't have a fiddle yet cos I don't know where or how to start
Answer for those who wants to hack CSS transitioning zooming to get applied on background-size: cover;
-- if not, than read the second section for standard ways to achieve such effect
<div class="wrap">
<div></div>
<p>hello</p>
</div>
html, body {
height: 100%;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
div.wrap > div {
position: absolute;
height: 100%;
width: 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
z-index: -1;
}
div.wrap:hover > div {
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}
Demo (Using background-size: cover; to transition/zoom the element)
As you said that transitioning the cover size is necessary, so I came up with the trick which I had told you previously, here I have a child element nested under position: relative; element where am having the child element set to position: absolute; with background-image having background-size set to cover and then on hover of parent, I zoom in the element using the transform: scale(2,2); property.
Also, a crucial thing while working with this solution is that we need to set the z-index of the position: absolute; element lower than what the elements you will be placing inside, so it will act like a background
Answer for those who want to go clean with HTML and CSS
You cannot animate a background-size if it's value is cover so either you will need px or %, or you can also use an img tag with transform: scale(2,2); property.
Demo
Demo 2 (zoom-in or zoom-out from the center)
div {
height: 200px;
width: 200px;
background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
background-size: 100% 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
div:hover {
background-size: 150% 150%;
}
If you want to stick with background-size: cover; than you will have to wrap entire element inside a wrapper element having fixed dimensions with overflow: hidden; and than scale the child element on hover of parent element.
As you commented, for an img tag example, you can use transform: scale(2,2); to achieve that with the parent element set to overflow: hidden;
Demo 2
div {
height:300px;
width: 300px;
overflow: hidden;
}
div img {
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
div:hover img {
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}
<script>
function animate(){
document.getElementById('a').style.webkitTransitionDuration='1s';
document.getElementById('a').style.backgroundSize="200% 200%";
}
</script>
<div id="a" onmouseover="animate()" style="width: 200px; height: 70px; border: 1px solid; background: url('http://www.wpclipart.com/food/fruit/apple/apples_4/apple_honeycrisp_small.png') no-repeat;background-size: 100% 100%; ">
</div>
You can do something like this for webkit browsers.
Demo Here