-webkit-mask-image: url(https://assets.codepen.io/77020/sw-jedi-crest.svg); -webkit-mask-size: 10%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; } .scenes:is(:hover, :focus) .scene-2 { animation: scene-transition 4s cubic-bezier(1, 0, 1, 1) forwards; } @k...
If you are having trouble with the pen, try the archived copy on GitHub Image Gallery Accordion Snippet See the Pen Image Accordions – Date 9 (24 days of animation) by januaryofmine (@januaryofmine) on CodePen. Related Pure CSS Image Gallery Hover Animation Hover to lift Fog of War and...
.scene-2{background-image:url(https://assets.codepen.io/77020/sw-horizontal-wipe-scene-2.jpg);-webkit-mask-image:linear-gradient(toright,transparent47.5%,#fff52.5%);-webkit-mask-size:210%;-webkit-mask-position:left;}.scenes:is(:hover,:focus).scene-2{-webkit-mask-position:right;transitio...
All we’re doing here is applying a different transition duration and delay for each custom variable. Go ahead and hover the image. The first gradient of the mask will fade out to an alpha value of0to make the image totally see through, followed but the second gradient. CodePen Embed Fal...
img:hover{background-size:51%51%;} Yes, it’s51%instead of50%— that creates a small overlap and avoids possible gaps. Let’s try another idea using the same technique: This time we are using only two gradients, but with a more complex animation. First, we update the position of eac...
(https://assets.codepen.io/77020/sw-jedi-crest.svg);-webkit-mask-size: 10%;-webkit-mask-position: center;-webkit-mask-repeat: no-repeat;}.scenes:is(:hover, :focus) .scene-2 {animation: scene-transition 4s cubic-bezier(1, 0, 1, 1) forwards;}@keyframes scene-transition {100% {-...
If you have a panoramic image and want to add some animation, animate the background-position with the help of keyframes. The animation will be running when the background has the focus or hover states..panoramic { width: 300px; height: 300px; background: url('shark.jpeg'); background...
(https://assets.codepen.io/77020/sw-jedi-crest.svg);-webkit-mask-size:10%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;}.scenes:is(:hover, :focus) .scene-2{animation:scene-transition 4scubic-bezier(1,0,1,1)forwards;}@keyframesscene-transition{100%{-webkit-mask-size:1800...
(https://assets.codepen.io/77020/sw-jedi-crest.svg);-webkit-mask-size: 10%;-webkit-mask-position: center;-webkit-mask-repeat: no-repeat;}.scenes:is(:hover, :focus) .scene-2 {animation: scene-transition 4s cubic-bezier(1, 0, 1, 1) forwards;}@keyframes scene-transition {100% {-...
Incorporate "display:inline-block" into your code. #chat:hover { background-image:url(http://i57.tinypic.com/i26j3b.png); width:91px; height:40px; display:inline-block; } Demo CSS transition background-image jump hover in Safari, CSS transition background-image jump hover in Safari. ...