CSS3 transition animation when adding/removing class in child elements

CSS3 transition animation when adding/removing class in child elements - javascript

I have a problem that CSS3 transitions doesn't work on child elements when adding a class to a parent.
Here's my code:
http://jsfiddle.net/4zwg3/327/
Image doesn't get animations and instantly goes to 50px height.
CSS:
.header {
height: 400px;
width: 400px;
background: blue;
}
.small_header img {
height: 50px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small_header {
height: 100px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
HTML:
<div class="header">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>
Javascript:
var click = 1;
$( ".header" ).on( "click", function() {
console.log('works');
if (click == 1) {
$(".header").addClass("small_header");
$(".small_header").removeClass("big_header");
click = 0;
} else {
$(".header").addClass("big_header");
$(".small_header").removeClass("small_header");
click = 1;
}
});
But as you can see there's no transition animations on image.
How can it be fixed?

This issue because the image doesn't have any start height and browser can't calculate the transition, and if you add transition on the small_header class, the transition works only when the image shrinks.
$( ".header" ).on( "click", function() {
$(".header").toggleClass("small_header");
});
.header {
height: 400px;
width: 400px;
background: blue;
}
.header img {
height:200px;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small_header img {
height: 50px;
background-size: auto 100%;
}
.small_header {
height: 100px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>

first of all, I would avoid that handling with these two classes and the "click" variable.
Your JS should look more like:
$( ".header" ).on( "click", function() {
console.log('works');
$(".header").toggleClass("small");
});
Than your CSS should look like this:
.header {
height: 400px;
width: 400px;
background: blue;
}
.small {
height: 100px;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small img {
height: 50%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}

Try it:-
#someDiv{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

It can't be animated, because CSS knows nothing about your start size of image. You should add image size for calculation of animation:
.header img {
height: 400px;
}

Related

show Text when hover on a image with css and javascript

I'm trying to make a text Display on mouseover but i cant and i dont know how!
i tried many css codes but i failed.
And also i'm learning javaScript and i want to know how to do it with js
please see my code and help me slove my problem
Thanks and sorry if I'm making some rookie mistake
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.Time{
border-radius: 1000px;
margin-right: 20px;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Time:hover {
-webkit-filter: blur(5px);
cursor:pointer;
}
<img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"></div></li>

Here's a solution without javascript.
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.Time{
border-radius: 1000px;
margin-right: 20px;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.TimeTooltip {
display: none;
position: absolute;
top: 90px;
left: 90px;
}
.wrap:hover .Time {
-webkit-filter: blur(5px);
cursor:pointer;
}
.wrap:hover .TimeTooltip {
display: block;
}
<li><div class="wrap"><img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"><span class="TimeTooltip">tooltip</span></div></li>

see below code snippet, if you want to show text besides image on hover.
call();
function call() {
document.getElementsByClassName('Time')[0].addEventListener("mouseover", Show);
document.getElementsByClassName('Time')[0].addEventListener("mouseout", hide);
}
function hide() {
document.getElementsByClassName('imageText')[0].style.display = 'none';
}
function Show() {
document.getElementsByClassName('imageText')[0].style.display = 'block';
}
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.Time{
border-radius: 1000px;
margin-right: 20px;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Time:hover {
-webkit-filter: blur(5px);
cursor:pointer;
}
.imageText {
display: none
}
<img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"></div></li>
<span class="imageText">text</span>

Transition on overlay

I have a left menu that slides in when the user clicks on the hamburger. Behind it is an overlay with the following SCSS:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
}
.left-menu {
background: $glb-nav-dark-blue;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
a:hover {
color: $glb-nav-white;
}
}
When people click on the hamburger menu, the overlay shows up abruptly. I need it to fade in. How can I do that using CSS?
Here's the HTML:
<div class="overlay"></div>
<div class="left-menu"></div>
When the user opens the page the left-menu has a left position of -284px. Then when people click on the hamburger icon, I add a class to the div that sets its left position to 0.

Instead of adding a class, you can set the opacity using jQuery's .CSS
For example:
$(".overlay").css({opacity:50});
To reset it, use
$(".overlay").removeAttr("style");
Use CSS transitions as you did for the menu:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Use css transitions as you did with the menu, ie:
.overlay {
// other css
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
-o-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
Or, if using SASS: #include transition(opacity 500ms ease);
Note, you can set the timing and style to be what you like, more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

just add transition to the overlayed div
div {
/* -transition: 2 seconds- */
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: 2s;
}
div:hover {
height: 200px;
background: red;
}
<div>transition on hover</div>

Css animation to put a color layer over a background image while hovered

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.

css opacity ease in out affecting other elements too

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>

effect on changing background

I have this function:
function changecolors() {
x = 1;
setInterval(change, 7000);
}
And second function is this one:
function change() {
if(x == 1) {
document.getElementById('right').style.background='url(images/1.png)'
}
}
How can I apply any effect on background change ?

Assuming you are looking for an animation effect when background image appears.
DEMO
HTML:
<div id="right">
<div id="right-bg"></div> // Note an extra div is being used to animate background using opacity of this div.
<p>Hello!!</p>
</div>
CSS:
#right {
display: block;
height: 50px;
position: relative;
width: 50px;
Padding: 25px;
}
#right-bg {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 100%;
z-index: -1;
opacity: 0;
-webkit-transition: opacity 0.35s ease-in-out;
-moz-transition: opacity 0.35s ease-in-out;
-o-transition: opacity 0.35s ease-in-out;
-ms-transition: opacity 0.35s ease-in-out;
transition: opacity 0.35s ease-in-out;
}
JS:
function changecolors() {
x = 1;
setInterval(change, 7000);
}
function change() {
if (x == 1) {
document.getElementById('right-bg').style.background = 'url(http://placehold.it/100x100)';
document.getElementById('right-bg').style.opacity = 1;
}
}
changecolors();

Develop Reference

JavaScript is the programming language of the Web.

CSS3 transition animation when adding/removing class in child elements - javascript

Try it:- #someDiv{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

It can't be animated, because CSS knows nothing about your start size of image. You should add image size for calculation of animation: .header img { height: 400px; }

Related

show Text when hover on a image with css and javascript

Transition on overlay

Css animation to put a color layer over a background image while hovered

css opacity ease in out affecting other elements too

effect on changing background

Categories

Resources