I was looking at this website-
http://melaniedaveid.com/
And it has a very nice zoom in (Ken Burns effect) on some of the images. I like the smoothness of the animation.
This is the CSS divs use-
.project .project__header .header__image {
background-position: center center;
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scale(1);
transition: transform 15s linear 0s;
width: 100%;
}
I tried doing something similar but this does not work for me. What am I missing?
You need to have the transition happen on hover. So it would look something like this:
https://jsfiddle.net/kzam3Lo7/
img {
background-position: center center;
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scale(1);
width: 100%;
}
img:hover {
transform: scale(2);
transition: transform 15s linear 0s;
}
Related
I wanted to create a div which has a background image and a transparent background color over it with some text. When hover, the transparent background color should slide out towards the bottom of the div as shown in the image:
https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
Left block is default. Right block is hover state.
I modified this snippet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I modified the provided style to:
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container .overlay {
opacity: 0.75;
}
.container:hover .overlay {
opacity: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
Edited:
My Problem
I tried to achieve a simple slideout animation on my as shown in the image I provided. See this: https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
I have tried something like this - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I edited the css they provided to the css I provided above.
Please see the image I provided. I wanted to achieve that.
Try this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
transition: .5s ease;
height: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope this code may help you.
Hi hope this is what you are looking for
Try this fiddle
.container:hover .overlay {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
opacity: 1 !important;
}
hope this is what you are looking
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;}
http://jsfiddle.net/jxgrtmvy
I have a fixed background image within a div that will not display consistently in mobile Safari. It displays fine when a page is refreshed, but the main issue arises when I try to prompt backward and forward to other site pages, which causes the browser to reposition the background's origin point awkwardly.
Note: The first image shows the background image displaying correctly, while the second image displays the transform-origin shift that occurs upon navigating back/forward in the Safari mobile browser, (the main issue).
Here's a snippet, for further reference:
body,
html {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: -2;
}
.sitebg {
background: url("http://maxpixel.freegreatpicture.com/static/photo/1x/Seamless-Repeating-Tiling-Tile-able-Tileable-1889447.jpg");
background-repeat: repeat;
background-position: center;
background-size: 720px 720px;
-webkit-animation: 180s rotatebg infinite linear;
-moz-animation: 180s rotatebg infinite linear;
-o-animation: 180s rotatebg infinite linear;
-ms-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
width: 750px;
height: 750px;
position: fixed;
top: 50%;
left: 50%;
}
.sitebg-parent {
position: absolute;
height: 100%;
width: 100%;
margin: auto;
padding: 0;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#-webkit-keyframes rotatebg {
0% {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
100% {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
}
#keyframes rotatebg {
0% {
transform: rotate(0deg) translate(-50%, -50%);
transform-origin: top left;
}
100% {
transform: rotate(360deg) translate(-50%, -50%);
transform-origin: top left;
}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
Please try the code below.
I've slightly changed your code and removed unnecessary and ivalid css rules.
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
.sitebg {
position: absolute;
top: 50%; left: 50%;
width: 2000px; height: 2000px;
margin: -1000px 0 0 -1000px;
background: url("http://s3.gomedia.us/wp-content/uploads/2008/06/skullbg-green.gif");
transform-origin: 50% 50%;
-webkit-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
}
.sitebg-parent {
position: absolute; z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#-webkit-keyframes rotatebg {
0% {-webkit-transform: rotateZ(0deg)}
100% {-webkit-transform: rotateZ(360deg)}
}
#keyframes rotatebg {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
I'm looking for a way to change the opacity of background-color-blend-mode like
Photoshop. My goal is to animate the opacity of the blend-mode to make it disappear. Any ideas ?
#img-esadvalence {
background-image: url(http://leodurand.fr/works/planesad/esad1.jpg);
background-color: #e12a1c;
background-blend-mode: screen;
}
.all-img-menu {
background-size: contain;
background-position: center;
width: 110%;
padding-bottom: 40.75vh;
display: block;
top: 50%;
-ms-transform: translate(0%,-50%);
-webkit-transform: translate(0%,-50%);
transform: translate(0%,-50%);
position: absolute;
transition: all 0.6s ease;
}
<div id="img-esadvalence" class="all-img-menu"></div>
The blend mode only works when there are 2 backgrounds. To cancel the blend mode gradually, you can animate (transition) to a transparent background color.
Demo (hover the image to see the effect):
#img-esadvalence {
background-image: url(https://placeimg.com/640/480/animals);
background-color: #e12a1c;
background-blend-mode: screen;
transition: background-color 1s;
}
#img-esadvalence:hover {
background-color: transparent;
}
.all-img-menu {
background-size: contain;
background-position: center;
width: 110%;
padding-bottom: 40.75vh;
display: block;
top: 50%;
-ms-transform: translate(0%,-50%);
-webkit-transform: translate(0%,-50%);
transform: translate(0%,-50%);
position: absolute;
transition: all 0.6s ease;
}
<div id="img-esadvalence" class="all-img-menu"></div>
I am trying to build a simple CSS3 animation, a pulsing square inside a bigger square (centered).
It seems to work fine except on IE, at the end of the animation the inner square move to up-left of his parent.
I didn't find a solution, help me please. What am I doing wrong?
#foo{
position: relative;
display: table;
margin: auto;
width: 100px;
height: 100px;
top: 50px;
background: #ccf;
}
#foo::before{
content:"";
position: absolute;
display: inline-block;
width: 50%;
height: 50%;
left: 50%;
top: 50%;
background: #55a;
animation: 1s ease-in-out infinite pulse;
}
#keyframes pulse {
0% { transform: translate(-50%, -50%) scale(.2,.2); }
50% { transform: translate(-50%, -50%) scale(.8,.8); }
100% { transform: translate(-50%, -50%) scale(.2,.2); }
}
Here a JsFiddle of the code
How strange. It looks like IE and Edge are having some issue resetting the transforms on subsequent loops.
Although I couldn't find a direct solution to the browser's rendering problem (likely a bug), your sample looks like a great place to use the absolute centering trick. By not having the extra translate to center it, it works in IE, and is a bit simpler.
Working Example (jsFiddle):
#foo{
position: relative;
display: table;
margin: auto;
width: 100px;
height: 100px;
top: 50px;
background: #ccf;
}
#foo::before{
content:"";
position: absolute;
display: inline-block;
width: 50%;
height: 50%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #55a;
animation: 1s ease-in-out infinite pulse;
}
#keyframes pulse {
0% {transform: scale(.2,.2); }
50% {transform: scale(.8,.8); }
100% {transform: scale(.2,.2); }
}
<i id="foo"/>
My CodePen: http://codepen.io/leongaban/pen/wJAip
The orange gear is 80x80 and so is the white # logo.
I added the blue background so you can see that for some reason the orange gear looks like it is spinning off center.
Here is the image lined up in photoshop:
html:
<div id="spinner">
<div id="logo">
<img src="http://leongaban.com/_codepen/whoat/loader-logo.png"/>
</div>
<div id="gear" class="spin">
<img src="http://leongaban.com/_codepen/whoat/loader-gear.png"/>
</div>
</div>
CSS:
div#spinner {
position: absolute;
width: 80px;
height: 80px;
top: 35%;
left: 50%;
margin-left: -40px;
background: blue;
}
div#logo {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
z-index: 3;
}
#logo img {
width: 100%;
height:100%;
}
div#gear {
position: absolute;
top: 0;
left: 0;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
pointer-events: none;
z-index: 2;
}
.spin {
-webkit-animation: rotation 4.5s linear infinite;
animation: rotation 4.5s linear infinite;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
}
Make the image in the #gear div block level.
#gear img{
display:block;
}
http://codepen.io/anon/pen/rjfbl
For whatever reason your gear element is getting a height of 84px. This will cause it to spin off-axis. As an experiment you might wish to try setting height and on #gear to something very small (e.g. 0px) and watching it; it will be as though it's rotating around a point at the top of its bounding box.
Set the width and height of your gear explicitly to 80x, or 100%, and it will work.
div#gear {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
pointer-events: none;
z-index: 2;
}
Codepen (yours with the two added lines, width and height): http://codepen.io/anon/pen/LuBvI