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>
Related
Is there any way to make this same animation while also having a slanted background ?
either using pure css or react spring ?
Hover animation
i have tryed both solutions under but non of em go me slander background + the left to right, left to right animation.
HTML:
<div>Box</div>
How i want the slider to look like with slander.
div {
position: relative;
display: inline-block;
padding: 15px 70px;
color: #B17461;
font-size: 30px;
transition: color .5s;
overflow:hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 150%; height: 100%;
background: #B17461;
z-index: -1;
transform-origin:0 0 ;
transform:translateX(-100%) skewX(-45deg);
transition: transform .5s;
}
div:hover {
color: #fff;
}
div:hover:before {
transform: translateX(0) skewX(-45deg);
}
and under her is the animation goal:
div {
position: relative;
display: inline-block;
padding: 15px 70px;
color: #B17461;
font-size: 30px;
transition: color .5s;
overflow:hidden;
background: linear-gradient(#488566 0 0) no-repeat;
background-size: 0% 100%;
background-position: 100% 0%;
transition: background-size .4s;
}
div:hover {
background-size: 100% 100%;
background-position: 0% 0%;
transition: background-size .4s;
}
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 this JSfiddle. This is an in-progress section of my website. The problem I'm having with the snippet of code is that the text will not size properly when adjusting the CSS percentage values for the height, width, and, most importantly, the top and left positioning. I don't know if my positioning is incorrect or not. I'm not the best at knowing when to use what positions at what specific instances.
CODE:
#charset "utf-8";
/* CSS Document */
.Experience_Target {
display: inline-block;
}
.EXP1Box {
height: 100vh;
overflow: hidden;
}
#Hangar {
top: 0;
height: 50%;
}
#Virtual {
top: 0;
height: 50%;
}
.Hangar {
background: url(https://s8.postimg.cc/d56er2eut/Hangar_Phot.png);
height: 50%;
width: 100%;
background-position: 75%;
background-repeat: no-repeat;
transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.Hangar:hover {
box-shadow: inset 0 0 0 150vw rgba(0, 0, 0, 0.7);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
/* IE 9 */
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}
.NextEra {
position: relative;
width: 0%;
height: 0%;
top: 3.5%;
left: 40%;
z-index: 1;
transition: .5s ease;
-moz-transition: .5s ease;
-ms-transition: .5s ease;
-webkit-transition: .5s ease;
-o-transition: .5s ease;
}
.Hangar:hover .NextEra {
position: relative;
width: 70%;
height: auto;
top: 0.0%;
left: 26.3%;
z-index: 1;
}
h3 {
font-family: "Myriad Pro";
font-size: 63px;
color: white;
}
h4 {
font-family: "Myriad Pro";
font-size: 64px;
color: white;
}
.Hangar:hover .NextText1 {
position: relative;
top: 60%;
left: -18%;
z-index: 2;
font-style: italic;
}
.NextText1 {
position: relative;
top: -300%;
left: 0%;
z-index: 2;
}
.Hangar:hover .NextText2 {
position: relative;
top: -300%;
left: 2%;
z-index: 2;
width: 30%
}
.NextText2 {
position: relative;
top: 100%;
left: 18%;
z-index: 2;
}
<section class="EXP1Box">
<div class="Hangar">
<div class="NextEra">
<div class="NextEra">
<img alt="NextEra" src="https://s8.postimg.cc/h1jqn4zv9/Next_Era_Pop.png" class="NextEra">
</div>
<div class="NextText1">
<h4 class="NextText1">Future Ambitions</h4>
</div>
<div class="NextText2">
<h3 class="NextText2">Internship Position With:</h3>
</div>
</div>
</div>
<div class="Virtual">
</div>
</section>
What I want to happen is for the text to be small and off the page when someone is not hovering over the picture, but to become large and take up half of the side of the image once someone hovers over it - similar to the animation of the NextEra logo on the left. I just can't position any text at the current moment for some weird reason. Any help would be greatly appreciated.
I think one option for you would be to use display:none or visibility:hidden to hide the text when you don't want to display it, instead of messing with z-indexes and transitions. It wasn't very clear from your code whether you wanted the text to overflow the box when visible.. I positioned it so that it was all in the box. I adjusted the text sizes but if you want them smaller /bigger, you can tweak. I added color (just so I could see where they were to begin with).. again, tweakable.
Here's the fiddle and snippet:
#charset "utf-8";
/* CSS Document */
.Experience_Target {
display: inline-block;
}
.EXP1Box {
height: 100vh;
overflow: hidden;
}
#Hangar {
top: 0;
height: 50%;
}
#Virtual {
top: 0;
height: 50%;
}
.Hangar {
background: url(https://s8.postimg.cc/d56er2eut/Hangar_Phot.png);
height: 50%;
width: 100%;
background-position: 75%;
background-repeat: no-repeat;
transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*background-attachment: fixed;
Really wish I could make this work.
Fucks up because of zoom*/
}
.Hangar:hover {
box-shadow: inset 0 0 0 150vw rgba(0, 0, 0, 0.7);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
/* IE 9 */
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}
.NextEra {
position: relative;
width: 0%;
height: 0%;
top: 3.5%;
left: 40%;
z-index: 1;
transition: .5s ease;
-moz-transition: .5s ease;
-ms-transition: .5s ease;
-webkit-transition: .5s ease;
-o-transition: .5s ease;
}
.Hangar:hover .NextEra {
position: relative;
width: 70%;
height: auto;
top: 0.0%;
left: 26.3%;
z-index: 1;
}
h3 {
font-family: "Myriad Pro";
font-size: 63px;
color: blue;
}
h4 {
font-family: "Myriad Pro";
font-size: 64px;
color: green;
}
.NextText1 {
color: forestgreen;
margin-left: 30px;
margin-top: 10px;
position: relative;
z-index: 2;
font-style: italic;
visibility: visible;
}
.Hangar:hover .NextText1 {
/*margin-left: 18%;
z-index: 2;*/
visibility: hidden;
}
.Hangar:hover .NextText2 {
position: fixed;
visibility: visible;
top: 10%;
left: 2%;
z-index: 2;
width: 30%;
margin-left: 18%;
font-size: 30px;
color: red;
}
.NextText2 {
visibility: hidden;
}
<section class="EXP1Box">
<div class="Hangar">
<div class="NextEra">
<div class="NextEra">
<img alt="NextEra" src="https://s8.postimg.cc/h1jqn4zv9/Next_Era_Pop.png" class="NextEra">
</div>
<div class="NextText1">
<h4 class="NextText1">Future Ambitions</h4>
</div>
<div class="NextText2">
<h3 class="NextText2">Internship Position With:</h3>
</div>
</div>
</div>
<div class="Virtual">
</div>
</section>
How could I animate the link underline with using border-bottom, so that there is space between the text and the underline?
I know how to do it in the following way, so that the default text-decoration element is animated. But I would like to have space between the link and the underline, that is why I think I need to use border-bottom. But I can't get the border-bottom work with the transition animation. How could I do this? I tried looking for other solutions, but couldn't find any. Thanks!
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
you can fake an animated border via background and background-size:
a {
padding-bottom: 5px;
/* set here size + gap size from text */
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat;
background-size: 0px 3px;
transition: 0.5s;
text-decoration: none;
}
a:hover {
background-size: 100% 3px;
}
a[class] {
color: gray;
}
a.tst {
color: purple;
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat, linear-gradient(0deg, turquoise, turquoise) center calc(100% - 2px) no-repeat;
background-size: 0px 2px;
}
a.tst:hover {
background-size: 100% 2px;
}
<a href>kake animated border</a>
<a href class> why currentcolor ?</a>
<a href class="tst">mix of colors ?</a>
The code you've presented uses a pseudo-element not the default text-decoration. Since the pseudo element is positioned absolutely, you can change the distance easily. Change the a:before bottom to -5px or whatever negative value fits the distance that you want:
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Long long text
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;
}