Transition works half way: the ugly jump - css

I'm trying to get "transition" to work correctly when I add and remove a class but I have not succeeded.
Here's what I've done, which I think will help you understand my problem better:
http://jsfiddle.net/88mzjnec/9/
CSS CODE:
.navbar-brand > img{
max-height: 70px;
height:70px;
margin-top: -28px;
-webkit-transition: max-height 0.5s, width 0.5s, margin-top 0.5s;
-moz-transition: max-height 0.5s, width 0.5s, margin-top 0.5s;
-o-transition: max-height 0.5s, width 0.5s, margin-top 0.5s;
transition: max-height 0.5s, width 0.5s, margin-top 0.5s;
}
HTML CODE:
<div id="primary" class="ancho">
<a class="navbar-brand" href="http://www.imagenestotal.com/perrito/perrito-4.jpg">
<img src="http://www.imagenestotal.com/perrito/perrito-4.jpg" height="70" title="BLA BLA BLA" rel="home"></a>
</div>
<button onclick="removeAdd()">Add/remove class</button><div id="result"></div>
JAVASCRIPT CODE:
var add = true;
var result = document.getElementById("result");
function removeAdd(){
if(add){
$("#primary").removeClass("ancho");
add = false;
result.innerText = "¡Oh, no! The ugly jump.";
}else{
$("#primary").addClass("ancho");
add = true;
result.innerText = "All OK";
}
}
If someone could take a look and throw some light, I'd appreciate it...
Thanks,

In your CSS transitions, change the references from 'width' to 'height', as that's what you're actually animating.
That solves the main problem. I also suggest a few coding changes: 1. Removing the max-height lines (as they don't do anything since you've already fixed the height), 2. Since you're already using jQuery in one line, use it in your other lines where applicable to simplify things (you can use it to fix your broken "result" too), 3. Remove the 'onclick' attribute from the HTML and apply it via JS, so everything JS is only handled by JS, keep your scripting separate from your content and making things easier to maintain.
JS:
function removeAdd(){
if($("#primary").hasClass("ancho")){
$("#primary").removeClass("ancho");
$("#result").text("¡Oh, no! The ugly jump.");
} else {
$("#primary").addClass("ancho");
$("#result").text("All OK");
}
}
$(document).ready(function(){
$('#btn').click(removeAdd);
});
CSS:
.navbar-brand > img {
height: 70px;
margin-top: -28px;
-webkit-transition: height 0.5s, margin-top 0.5s;
-moz-transition: height 0.5s, margin-top 0.5s;
-o-transition: height 0.5s, margin-top 0.5s;
transition: height 0.5s, margin-top 0.5s;
}
.ancho .navbar-brand img {
height: 80px;
margin-top: -33px;
}
#result{
margin-top:20px;
}
HTML:
<div id="primary" class="ancho">
<a class="navbar-brand " href="http://www.imagenestotal.com/perrito/perrito-4.jpg">
<img src="http://www.imagenestotal.com/perrito/perrito-4.jpg" height="70" title="BLA BLA BLA" rel="home" />
</a>
</div>
<button id="btn">Add/remove class</button>
<div id="result"></div>
See it in action here: http://jsfiddle.net/88mzjnec/12/

Related

How to apply a css transition effect to a image without losing responsive property

I'm trying to add some effect of transition with css to some images but when it's applied the image expand to all is father container and don't show the text before it
Something like this is the html that I have:
<div id="people">
<div class="col-md-3 col-sm-6">
<div id="profilePic">
<img class="img-responsive img-circle bottom" src="img/someone_old.png">
<img class="img-responsive img-circle top" src="img/someone_now.png">
</div>
<h4>
<strong>Someone</strong>
</h4>
<p>Description.</p>
</div>
</div>
I'm using bootstrap and this other css for making the effect of transition and as well as responsive
#people .img-responsive {
margin: 0 auto
}
#profilePic img{
position: absolute;
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;
}
#profilePic img.top:hover{
opacity: 0;
}
This effect is for making interact the mouse with the images, been one in top of the another, so when the mouse pass hover, the images interchange themself.
The thing is that isteed of only using is div profilePic container, they expand and use all is father div, covering the title and the paragraph that is below it

Divs that are floated left are overlapping. I dont want them to overlap

I want to be able to float divs one, two and fin and at the same time have them not overlap upon the other. Right now as it is set up, when I have a look at it on a smaller screen, fin lands on top on top of two and two on top of fin.
Any kind of help in this direction will be appreciated.
Here is the html code:
<div class="iwrapper">
<div class="one">
<center>
<div id="i1">
</div>
<div>
<span class="img-tag">The BALD DESIGNER Look</span>
</div>
</center>
</div>
<div class="two">
<center>
<div id="i2">
</div>
<div>
<span class="img-tag">Meet TECHNODEN- My Home Design Space</span>
</div>
</center>
</div>
<div class="fin">
Grab my Resume
<div class="descpt">Facts about Me</div><div style="font-size: 90%; font-weight: 400; line-height: 1.7em;" >
> I love to go hiking and on adventure trails. This helps me often think of adventurous and innovative solutions to critical problems.
> Being a trained classical singer, I introduce new rhythm into my designs.
> I am good at finding an organization among my disorganized belongings and this helps me be clinical and find patterns during my research.
> And Yes, you may have guessed it by now; my favorite color is Green.
</div>
</div>
<div class="clear12fin"></div>
</div>
and here is the CSS associated with it:
.clear12fin{
clear: both;
}
.iwrapper {
width:99%;
}
#i1{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/my-picg.png");
width:300px; /*image width*/
height:300px; /*image height*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#i1:hover{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/my-pic.png");}
#i2{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/designspaceg.png");
width:300px; /*image width*/
height:300px; /*image height*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#i2:hover{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/designspace.png");}
.one{float:left; width:32%; margin-right:1%;}
.two{float:left; width:32%; margin-right:1%;}
.fin{display:inline-block; width:33%;
}
Set a min-width on .iwrapper
CSS
.iwrapper {
width:99%;
min-width: 930px; /* image width plus 30px for a 10px margin between divs*/
}
Have a fiddle - Fiddle Link!
Please use the #media query to make your page responsive... you can set the positioning of the elements based on the screen size by using #media in your css.. if you need help with that, let me know..

Make image fade out on mouseover in the div

I know my question may look weird at first, but let me explain...
I have a div, named subcontainer which contains two elements :
Two icons and a link.
Basically, I want the div to make the two icons disappear on hover, BUT not my link. Here is my code :
<div class="subcontainer">
<img class="icons" src="images/arrow_right.png"/>
Follow me
<img class="icons" src="images/arrow_left.png"/>
</div>
**Edit : I want the icons to disappear on subcontainer:hover. Not on icons:hover.
If you have any questions to help me, just ask! :)
Use psuedo selectors:
View Here: http://jsfiddle.net/SinisterSystems/hajt6/3/
By doing it this way, you are telling it to only target the img elements that are children of the .subcontainer, but also allowing you to target the entire div without affecting the a element.
<div class="subcontainer">
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
Follow me
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
</div>
CSS
.subcontainer:hover > img {
transition: 0.2s;
opacity: 0;
}
If you want to make the image fade, use the following CSS:
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.icons:hover{
opacity:0;
}
Here's a fiddle: http://jsfiddle.net/74wPn/
EDIT: Revised to fit asker's comment's needs.
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.subcontainer:hover .icons{
opacity:0
}
Updated fiddle: http://jsfiddle.net/74wPn/1/
Do this way:
.icons:hover {
display: none;
}
If you want it to disappear instantly:
.icons:hover {
display: none;
}
If you want it to do it over a set time period:
.icons:hover {
transition: 0.2s;
opacity: 0;
}
You can use jquery.
$(".icons").hover(function(){
$(".icons").hide();
});

Animation CSS3 does not work on this hover image

I have an image which its background changes in hover and I want to add hover to it.
here is what I want to add:
-webkit-transition: all 1s ease-in-out;
And it is the online version:
http://jsfiddle.net/jmXdh/2/
DEMO
This is the solution that you are searching for!
HTML CHANGES
<a href="/">
<img class="imghover" src="http://i42.tinypic.com/2v9zuc1.jpg"/>
<img class="img" src="http://i40.tinypic.com/i3s4dc.png"/>
</a>
CSS IMPROVEMENTS
.img{
z-index:1;
margin-left: -190px;
margin-bottom:5px;
opacity:0;
-webkit-transition:opacity 0.5s;
}
.img:hover{
opacity:1;
}
.imghover{
z-index:-100;
}
Some CSS properties can't be animated, including background-image. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

fade in/out with css3 [duplicate]

This question already exists:
Closed 11 years ago.
Possible Duplicate:
thumbnails fade in fade out
I'm curios if it's possible to achieve this effect ( only the fade in/out )
with css3.
I have a similar thumbnails scroller and I want to create that effect without javascript, or if this is not possible could you help me with a simple solution for creating this with jquery ?
Thanks!
Yes this is possible with CSS3 transitions.
Here's an example: http://jsfiddle.net/fgasU/
code:
<img src="photo.jpg"/>​
img{-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
img:hover{opacity:0}​
This simple example will change the opacity on hover. Because a css transition is defined for 'all' properties, and they are given a 1 second transition with an ease-in-out easing function, the property change is animated.
Also, because it is a new property, the transition property must be preceded by the applicable brower's implementation. -webkit for chrome/safari, -moz for firefox/mozilla, -o opera, -ms microsoft.
The jQuery solution: Wrap the thumbnails in a trigger div, which is absolutely positioned over the image. Target that to fade the elements in and out.
For a CSS3 solution, refer to Vigrond's answer.
HTML
<div id="wrapper">
<img src="http://lorempixum.com/600/600" />
<div id="trigger">
<div id="thumbnails">
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
</div>
</div>
</div>
CSS
#wrapper { position:relative; }
#trigger {
width:100%;
height:80px;
position:absolute;
left:0;
bottom:20px; }
#thumbnails {
width:100%;
height:80px;
display:none; }
#thumbnails img {
margin:10px;
float:left; }
jQuery
$(document).ready(function(){
$("#trigger").hover(function () {
$(this).children("div").fadeTo(200, 1);
}, function(){
$(this).children("div").fadeOut(200);
});
});
See my fiddle:
http://jsfiddle.net/TheNix/Cjmr6/

Resources