here is my code for filling the tank
const filler=(props)=>(
<div className={Classes.filler} style={{height: `${props.percentage}%`}}></div>
);
here is the css code for my filler
.filler{
background: url('../../../../assets/image/dark.png');
background-size: 180%;
transition: height 1s ease;
background-position: 0px 0px;
width: 100%;
transform-origin: 0% 100%;
background-repeat: no-repeat;
}
the problem which i am dealing with is that instead of the image of water increasing from down to top it increases from top to down. I tried by transforming the origin of the image but it did not worked.
Here are some images for reference.
Here i want the image to rise from the lower border but it is increasing from top to down
Can you try this. I'm not sure what triggers the animation, but in this example i'll just assume its hover to a link.
.filler{
background: url('../../../../assets/image/dark.png');
background-size: 180%;
width: 100%;
background-repeat: no-repeat;
height: 0px;
overflow:hidden;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
position:absolute;
left:0;
bottom:0;
}
.animationstart:hover{
height: 200px; /* max height */
}
Related
The problem started on the last Chrome update, since then the images crop and just do not render properly, but not all of them, just a couple.
I am using them this way:
.ch-info > div {
text-align: center;
display: block;
position: absolute;
width: 100%;
height: 105%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
Inside the div I have this class which provide the background image.
.img-1 {
background-image: url(../images/icons/name.svg);
background-size:cover;
}
I have no idea how to fix it. I have seen that applying fixed sizes on the image solves it but the same size do not work for all the pics and I would wanna know what can be the problem. I was thinking that may be something related to changes on how the CSS property works since update but it's just a theory.
This happens only on Chrome.
I am trying to achieve the effect shown here:
https://css-tricks.com/almanac/properties/t/transition/
Where the color changes when the user hovers over the element. But I want this to occur overtop a background image I set and for the animation to reverse when the user moves their cursor away from the element.
An example of which can be found here:
http://thefoxwp.com/portfolio-packery-4-columns/
I can get the transition part working with:
.box {
width: 150px;
height: 150px;
background: blue;
<!--background-image: url("http://lorempixel.com/380/222/nature");-->
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
}
<div class="box"></div>
But I am having trouble achieving it with a background image and making the white animation transparent over top of it.
The better way to do it would be to use an overlay over the image and apply transition on its opacity.
See this FIDDLE
Use a wrapper div for both .box and .overlay. Since we want overlay to placed exactly top of the box, we absolute positioned overlay on the top of box.
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
You Css
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out;
-o-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
}
.overlay:hover {
opacity: 0.7;
}
You can add background-image:none on .box:hover. It will remove the background-image and you can get the background-color work. As soon as, you move out of the div.box, image will appear again.
.box {
width: 150px;
height: 150px;
background-image: url("http://lorempixel.com/380/222/nature");
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
background-image:none;
}
<div class="box"></div>
the problem is that background and background-image cannot both exist at the same time. try using nested div tags: one with the background color nested inside the background-image.
My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}
I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/
+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>
Here is the jsfiddle: http://jsfiddle.net/kimimsc/LEjBR/
<section id="portfolioContent" class="blueTheme">
<div class="container mmContainer">
<div class="pullLeft portfolioVignette">
<div class="portfolioVignetteFilter">
<p>Test1</p>
</div>
</div>
</div>
#portfolioContent {}
.portfolioVignette {background-color: gold; width: 500px; height: 300px; border-radius: 20px; margin: 20px;}
.portfolioVignette > .portfolioVignetteFilter {height: 300px; width:0px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
.portfolioVignette:hover > .portfolioVignetteFilter {height: 300px; width: 500px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
So first of all, if you look at the jsfiddle that I provided you will see what I've done.
Bascily I have a div (in yellow) and I am using css3 transition to animate the width change on another div (grey with 0.5 alpha). The grey div appears over the yellow on hover and disappears when the hover action is over. You can also see that there is a text element 'Test1' that is always displayed.
So what I want to do is when there is no hover I would like to have only the yellow element without anything else (so no text aswell) and on hover I would like the text to come with the grey element.
I don't think this is the right way to do it but I couldn't find anything that could help me.
If I haven't been clear enough. tell me if you have any questions.
Thank you for your help guys,
I did something similar, but interpreted your problem a little differently:
.portfolioVignette p {
width:0;
margin-left:0;
overflow: hidden;
transition: width .5s ease-out;
transition: margin-left .5s ease-out;
}
.portfolioVignette:hover p {
width:100%;
margin-left:90%;
}
Something like this should do it:
.portfolioVignette p {
width: 0;
overflow: hidden;
transition: width 0.5s ease-out;
}
.portfolioVignette:hover p {
width: 100%;
}
See it here: http://jsfiddle.net/shomz/LEjBR/6/
I am completely lost here and need some mad help.
If you click here http://cdechmedia.com/WIP/
You will see three cards one form wow,LoL and wildstar.
As you can see by the background that it is an empty land.
What I am trying to do is whenever I hover over say the wow card the empty land will turn into another image.
I am at a loss of how to do this. Honestly I don't care if it's just with CSS , Javascript, or whatever as long and I can make it happen.
Here is the CSS for the cards an background:
<div class="GMSpash">
<div class="CardsWrapper">
<a href="#">
<div class="WoWCard"></div></a>
<div class="LoLCard"></div>
<div class="WSCard"></div>
</div>
</div>
And here is the CSS:
.GMSpash {
height: 656px;
width: 100%;
background-repeat: no-repeat;
background-position: center top;
background-image: url(images/GMSplashBG.jpg);
}
.LoLSplash {
height: 656px;
width: 100%;
background-repeat: no-repeat;
background-position: center top;
background-image: url(images/WSSplashBG.jpg);
}
.CardsWrapper {
height: 348px;
width: 719px;
margin-top: 450px;
margin-right: 0px;
margin-bottom: 0px;
position: absolute;
margin-left: -359.5px;
left: 50%;
}
.WoWCard{
background-image: url(images/WoWcard.png);
background-repeat: no-repeat;
float: left;
height: 348px;
width: 237px;
margin-top: 5px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
}
.WoWCard:hover {
background-image: url(images/WoWcardH.png);
margin-top: 0px;
}
.LoLCard {
background-image: url(images/LoLcard.png);
background-repeat: no-repeat;
float: left;
height: 348px;
width: 237px;
margin-top: 5px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
}
.LoLCard:hover {
background-image: url(images/LoLcardH.png);
margin-top: 0px;
}
.WSCard {
background-image: url(images/WScard.png);
background-repeat: no-repeat;
float: left;
height: 348px;
width: 237px;
margin-top: 5px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
}
.WSCard:hover {
background-image: url(images/WScardH.png);
margin-top: 0px;
}
Now as you can see there is a class that says .LoLSplash so when I hover over the league card it will turn the GMSpash to LoLSplash.
I have tried the #a:hover + #b and #a:hover ~ #b but for some reason it isn't working for me and I'm truly at a loss.
If you change your <div class="WoWCard"></div> to add an onmousemove and an onmouseleave like <div class="WoWCard" onmousemove='setBackgroundWOW()' onmouseleave='setBackgroundDefault()'></div>, and give your div <div class="GMSpash"> an id like <div class="GMSpash" id='gmspash'>then it should be easy to set the background with a simple javascript function:
<script>
function setBackgroundWOW(){
document.getElementById("gmspash").style.backgroundImage = "url('wow_image_url')";
}
function setBackgroundDefault(){
document.getElementById("gmspash").style.backgroundImage = "url('images/GMSplashBG.jpg')";
}
</script>
Good luck!
Looks like you want something like this.
$(".CardsWrapper > a").mouseover(function() {
var $this = $(this);
if ($this.children.hassClass("WoWCard")) {
$(".CardsWrapper").parent().removeClass().addClass("WoWSplash");
}
else if ($this.children.hassClass("LoLCard")) {
$(".CardsWrapper").parent().removeClass().addClass("LoLSplash");
}
else if ($this.children.hassClass("WSCard")) {
$(".CardsWrapper").parent().removeClass().addClass("WSSplash");
}
});
Just set an "onmouseover" and "onmouseout" for the specific card like this:
<div id="LoLCard" class="LoLCard" onmouseover="changeLoLBackground()" onmouseout="resetLoLBackground()"></div>
and in JS:
function changeLoLBackground() {
document.getElementById("LoLCard").style.backgroundImage = 'url(URLofYourNewImage)';
}
function resetLoLBackground() {
document.getElementById("LoLCard").style.backgroundImage = 'url(URLofYourOrgImage)';
}
If you meant the background image of the website replace
document.getElementById("LoLCard")
with the id of your background div.