i have a problem using css3 transitions
how can i make the transition smooth it appears instantly
i want the div box to slowly change its height when i hover over it
the html code
<div id="imgs">
<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />
</div>
jsfiddle
I believe you need to set a specified height instead of auto. http://jsfiddle.net/BN4Ny/ this does a smooth expansion. Not sure if you wanted that little close open effect though. I just forked your jsfiddle and added a specified height.
This solution does not need javascript or have the problem of needing to have a fixed height for the container before hand.
This is made possible by using max-height property and setting its value to a high value.
#imgs {
border:1px solid #000;
border-radius:3px;
max-height:20px;
width:100%;
overflow:hidden;
transition: 2s ease;
}
#imgs:hover {
max-height:15em;
}
<div id="imgs">
<img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>
Instead of using a set height on a container or using JS (which are both awkward solutions)... You can put the images in list items and work your transition on the li.
If all the images are going to a similar height it means your content inside the container can still be dynamic. For example...
/*
CLOSED
*/
div.container li
{ height:0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
/*
OPEN
*/
div.container:hover li
{ height:30px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
Here's how you can do it: http://jsfiddle.net/minitech/hTzt4/
To keep a flexible height, JavaScript is a necessity, unfortunately.
well I'm using this method:
use max height to transition height instead of the height directly...
for example:
div {
height: auto;
max-height:0;
}
.toggle-above-div:hover div {
max-height:0;
}
Related
I'm using this to create a mouseover effect:
<a href="http://glim.pt/produtos/cadeiras">
<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"
onmouseover=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png';"
onmouseout=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png';">
</img>
</a>
But I wanted it to be smoothly, how can I add fade effect? It's for a Wordpress page.
You can accomplish this using CSS transitions, if you aren't opposed to it as detailed in this blog post on crossfading images:
/* A wrapper for your images to transition */
.transition-wrapper {
position:relative;
height:300px;
width:300px;
margin:0 auto;
}
/* Position each image and apply a transition */
.transition-wrapper 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;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity:0;
}
And then simply update your markup accordingly :
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras">
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>
Example
/* A wrapper for your images to transition */
.transition-wrapper {
position:relative;
height:300px;
width:300px;
margin:0 auto;
}
/* Position each image and apply a transition */
.transition-wrapper 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;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity:0;
}
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras">
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>
Sounds like your going to want to add some javascript to that.
I recommend using the jQuery library.
https://jquery.com/
Here you can find a bunch of different fade effects and the documentation
http://api.jquery.com/
With jQuery:
$('a').hover(function(){
$(this).children().fadeOut(100, function(){
$(this).children().remove();
});
$(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png"</img>').hide().fadeIn(2000));
}, function(){
$(this).children().fadeOut(100, function(){
$(this).children().remove();
});
$(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>').hide().fadeIn(2000));
});
a {
display: block;
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a href="#">
A link
<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>
</a>
Some quick example, but you'll have to fix the issue of the image, that fades in, while the first image fades out. But the post above has much more better solution via css.
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
If this is what you mean? or what you are looking for? I tried to answer to the best of my ability.
I'm trying to center align several crossfade icons within a widget. So far, I've only managed to align them either left or right. If I try to do anything else, it just stacks each icon vertically. Here's the CSS:
.icon {
float:left;
position:relative;
height:32px;
width:32px;
padding:4px;
}
.icon img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.icon img.top:hover {
opacity:0;
}
And the HTML for one icon:
<div class="icon">
<img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter-1.png" class="bottom" />
<img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter.png" class="top" />
</div>
I'm trying to do it with five icons, but can't figure it out. Seems to be a problem with how the crossfade effect stacks the images.
Here it is on JFiddle.
Try surrounding them with a 100% width div, removing float:left, and adding display:inline-block
http://jsfiddle.net/3on0x2Ly/2/
You can do that with one more div tag, which will wrap the icon. First you have to remove the float: left property of the class .icon.
Now one of the ways is to set the .icon class to inline block and the new div tag, which wrap them, you have to give it a text-align property to center. And that will center the each icons.
Here is the code - http://jsfiddle.net/syrup/3on0x2Ly/1/
I've been writing this website for a few days now and have gotten into trouble with my logo position. I can't seem to move it not matter how much I try. Can anyone suggest how I can do this? PS. (I'm still learning css.)
HTML:
<div class="logofx">
<img src="images\logo.png">
</div>
CSS:
.logofx img {
top:300px;
left:50px;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.logofx img:hover {
-webkit-filter: hue-rotate(333deg);
}
You need position:relative, position:absolute or position:fixed (depending on the specific desired effect*).
By default, elements have position:static and statically-positioned elements are unaffected by left/top/right/bottom adjustments.
*Effects:
position:relative moves the element by the amount specified, but other elements behave like it hasn't moved. If you want other elements to move too, consider using margin properties instead.
position:absolute moves the element to be placed relative to the nearest position:relative container (or the whole document, if there is none).
position:fixed fixes the element in the browser window, using the left/top as coordinates.
Set position: fixed
.logofx img {
position: fixed;
top:300px;
left:50px;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
what about margins instead?
.logofx img {
margin:300px 0 0 50px;
display:block;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
HTMl:
<div class="logo"><div class="logofx">
<img src="images\logo.png">
</div>
</div>
CSS:
.logo{position:relative;}
.logofx{position:absolute; top:10px; left:10px;}
Try this code this will help you .Kindly put the top and left at correct pixel or move where you want using top and left property.
I'm attempting to create a small animation on an image (the image grows slightly) when a link is hovered over using only CSS3 animations.
The relevant snippets from my code
HTML:
<img id="enterimg" src="img.png" alt="" />
<a id="enterbutton" href="home.php">Enter</a>
CSS:
#enterimg {
width: 350px;
height: 350px;
-webkit-transition: width 1s ease-out, height 1s ease-out;
-moz-transition: width 1s ease-out, height 1s ease-out;
-o-transition: width 1s ease-out, height 1s ease-out;
transition: width 1s ease-out, height 1s ease-out;
}
a:hover ~ #enterimg{width:400px;height:400px;}
I'm sure the transitions themselves are correct, but none of the different "calls" (the last line of CSS) I've tried have worked.
(This is similar to a number of other questions, but I've looked through them and as far as I can tell none of them answer my question)
Thanks to Lokesh Suthar.
The order of the sibling selector required I placed the link first in the markup. Since the selection was written:
a:hover ~ #enterimg{width:400px;height:400px;}
The markup needed to be in that order
<a id="enterbutton" href="home.php">Enter</a>
<img id="enterimg" src="img.png" alt="" />
If you wrap the content in the trigger, then position the content absolutely, you can achieve something similar to triggering a sibbling with CSS. At least it'll look and act that way.
HTML
<a href="">Click Me
<img id="enterimg" src="http://www.druglessdrs.com/wp-content/uploads/2012/07/google-logo-small.jpg" alt="" />
</a>
CSS
a img {
display:block;
position:absolute;
top:80px;
left:0;
border:solid 1px black;
-webkit-transition: width 1s ease-out, height 1s ease-out;
-moz-transition: width 1s ease-out, height 1s ease-out;
-o-transition: width 1s ease-out, height 1s ease-out;
transition: width 1s ease-out, height 1s ease-out;
}
a:hover img {
left:50px;
}
Fiddle
I have this code that works great. When I pass the mouse over the image it crossfades to another image.
What I want is: when I pass over the mouse the image crossfade and rest like this, I mean, make only 1 transition.
1)image 1
2)onmouseover image 2
3)onmouse out image 2
here my code:
<div id="crossfade">
<img class="bottom" src="images/site3/pasarela1.png" />
<img class="top" src="images/site3/pasarela2.png" />
</div>
here my css code:
#crossfade {
position:relative;
height:250px;
width:400px;
}
#crossfade img {
position:absolute;
left:0;
opacity: 1;
-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;
}
#crossfade img.top:hover {
opacity:0;
}
From what I get is that you want the :hover state to "stick". Though it's not a pure CSS solution, a solid way to handle this is if you are using jquery's .addClass.
$('.yourimage').mouseover(function() { //hover over your image to trigger the event
$(this).addClass('yourAnimationClass'); //add the animation class to the image you hovered over
});