The transition on my code isn't transitioning out. When I hover over it, it's fine but when I move my mouse away it just goes back to the original without transition.
Here's the code:
#nav a {
display:inline-block;
text-transform:lowercase;
width:35px;
padding:5px;
margin-left:3px;
font-size:9px;
letter-spacing:1px;
text-align:left;
border-bottom:1px solid {color:border};
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#nav a:hover {
width:50px;
text-align:right;
border-bottom:1px solid {color:border};
}
According to Mozilla, the text-align property is not animatable. The only reason that this code is animating at all is because the width is being animated. You'll have to use another property that is animatable, such as margin, padding or left.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties?redirectlocale=en-US&redirectslug=CSS%2FCSS_animated_properties
Related
When I use the Transition on a css element the things below it move. Here is an example on JSFiddle:
http://jsfiddle.net/pgdxd7su/ (Look at the JSFiddle one. The code snippet seems not to work)
h1{
font-size
}
h1:hover{
display: inline;
font-size: 3em;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
<!DOCTYPE html>
<body>
<h1>Hello</h1>
<hr>
</body>
Would there be a way to fix this and keep the hr from moving?
well, the easy cross-browser answer is to change your HTML markup to this:
<div id="h1box">
<h1>Hello</h1>
</div>
and then you can use your CSS like this:
#h1box {
position:relative;
height:80px;
border-bottom:1px solid #333;
}
h1 {
position:absolute;
top:5px left:5px;
}
h1:hover {
display: inline;
font-size: 3em;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
Basically we're getting rid of the difference between browser renderings of hr element, using more simple and easily to adapt elements like div, then removing the flow of elements by applying a position:absolute to the h1 element so the animation won't affect anything below it. Easy and cross-browser solution that will look teh same in every browser.
See fiddle here
I suppose what you need to fix is just the bad animation on hover,
perhaps this is what you want: Fiddle
your animation looks bad because you declare display: inline; inside the :hover and not in the main element itself, which will make the default display: block; from the <h1> changed to display: inline; only when it's hovered. It's jumping up and down because an inline element can't have a margin which <h1> on default, so the what you need to avoid the bad animation is either change your style to one of this
h1 {
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
font-size: 3em;
}
this will keep the default block element of the <h1>
h1 {
display: inline;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
font-size: 3em;
}
this will change the default block element of the <h1> to inline
h1 {
margin: 0;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
display: inline;
font-size: 3em;
}
this will change the default block element of the <h1> to inline on hover, but removing the default margin which makes it jumpy (this will result the same with the second one)
I'm currently using a couple divs to style my background as well as style an overlay for hovering. The problem is that I'd like to create an additional div so that I can style a box on hover as well, but I'm not sure where to place the new div in the HTML without it screwing up my formatting (class .captionbox for example).
My code and JS Fiddle is below. Any help is appreciated.
JS Fiddle
body {
background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg');
height:100%;
margin:0;
padding:0;
}
.bg {
position:fixed;
width:50%;
height:50%
}
#nw {
background-image: url('clevelandnight.jpg');
background-size:cover;
}
#ne {
top:0;
left:50%;
background-image: url('news1.jpg');
background-size:cover;
}
#sw {
top:50%;
left:0;
background-image: url('drinks1.jpg');
background-size:cover;
}
#se {
top:50%;
left:50%;
background-image: url('clevelandday.jpg');
background-size:cover;
}
.overlay {
height:100%;
text-align:center;
-webkit-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-moz-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-o-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-ms-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
}
.bg:hover .overlay {
background:rgba(0, 0, 0, .75);
opacity: 1;
height:100%;
}
.caption {
font-family: 'Open Sans Condensed', sans-serif;
font-weight:100;
color:white;
font-size:36pt;
white-space:nowrap;
-webkit-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
-moz-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
-o-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
}
.bg:hover .caption {
color:#7D7D7D;
font-size:72px;
white-space:nowrap;
margin-right:70%;
}
.captionbox {
height:100px;
width:100px;
background-color:white;
opacity:0;
border: 5px solid red;
}
<div id='nw' class='bg'>
<div class='overlay'>
<span class='caption'>Night Life</span>
</div>
</div>
<div id='ne' class='bg'>
<div class='overlay'>
<span class='caption'>News</span>
</div>
</div>
<div id='sw' class='bg'>
<div class='overlay'>
<span class='caption'>Food & Drink</span>
</div>
</div>
<div id='se' class='bg'>
<div class='overlay'>
<span class='caption'>Events</span>
</div>
</div>
If you make the div display:none it won't take up any space on the page. I presume as a caption box it's going to be position: absolute, so once that style is applied it won't affect your layout anyway. So you should be able to put it at the top level as a child of <body>.
Here's my Fiddle:
#facebookIcon{
vertical-align:middle;
color:white;
font-size:5.5em;
opacity:0.4;
}
#facebookinner:hover #facebookIcon{
opacity:1.0;
}
#facebookinner{
background:#3b5998;
border-radius:100px;
height:100px;
width:100px;
margin:0 auto;
text-align:center;
line-height:100px;
opacity:0.4;
-webkit-transition:
}
#facebookinner:hover{
opacity:1.0;
}
#facebookouter {
background-color:Green;
border:5px solid rgba(0,0,0,0);
height:100px;
width:100px;
border-radius:100px;
display: table-cell;
vertical-align: middle;
-webkit-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border- radius 0.2s linear,margin 0.2s linear;
transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
-moz-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
}
#facebookouter:hover {
height:130px;
width:130px;
border-radius:130px;
border:5px solid #3b5998;
opacity:1.0;
-webkit-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease- out,border-radius 0.2s linear,margin 0.2s linear;
transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
-moz-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
}
footer {
margin-top:250px;
height:150px;
position: absolute;
right: 0;
bottom: 10;
left: 0;
padding: 5 rem;
background-color: Green;
text-align: center;
padding-top:30px;
padding-left:40px;
}
/*________________Here is the Second Icon________________*/
#twitterIcon{
vertical-align:middle;
color:white;
font-size:3.5em;
-webkit-transition:font-size 0.2s;
-moz-transition:font-size 0.2s;
transition:font-size 0.2s;
}
#twitterinner:hover #twitterIcon{
opacity:1.0;
font-size: 3.5 em
}
#twitterinner {
background:#23dcd5;
border-radius:100px;
height:100px;
width:100px;
margin:0 auto;
text-align:center;
line-height:100px;
-webkit-transition:height 0.2s, width 0.2s, line-height 0.2s;
-moz-transition:height 0.2s, width 0.2s, line-height 0.2s;
transition:height 0.2s, width 0.2s, line-height 0.2s;
}
#twitterinner:hover{
opacity:1.0;
height: 80px;
width:80px;
line-height:80px;
}
#twitterouter{
background-color:Green;
border:5px solid #23dcd5;
height:100px;
width:100px;
border-radius:100px;
display: table-cell;
vertical-align: middle;
opacity:0.7;
}
#twitterouter:hover {
opacity:1.0;
}
I`m a beginner in CSS (1 week of learning) and I saw this hover effect (at the bottom of this page for the Social Icons).
So I tried to make the same hover effect with my limited skills. After a long time I made the same effect with two divs and an Icon.
The Problem is now that:
Im not able to set a margin to any of the "Icons", this means i want a gap between the FacebookIcon and the TwitterIcon so they wont interfere like the FacebookIcon is interfering with the Twitter Icon.
How can I hover over the inner div and activating the hover of the outer div (I can not make the inner div the parent of the outer because the outer has to be bigger than the inner).
I want the FacebookIcon Outer to grow from the center and not like its doing now. (Like in the example in the Webpage mentioned above.
I've searched for this solutions long time and found nothing suitable. Probably there is a much easier way of creating this Icons, this would be another solution :)
Thanks for your advice and sorry for my bad English (German here).
Im not able to set a margin to any of the "Icons"
That's because margin property is not applicable to display: table-cell elements.
How can I hover over the inner div and activating the hover of the
outer div
Well, you need to change your strategy. Set all the necessary CSS declarations on the child (<i> tag) and change the styles on parent:hover i selector.
Here we go:
HTML:
<footer>
<a href="#" class="icon-wrapper">
<i class="icon icon-facebook"></i>
</a>
<a href="#" class="icon-wrapper">
<i class="icon icon-twitter"></i>
</a>
</footer>
CSS:
.icon-wrapper {
float: left;
display: block;
margin: 0 1.875rem;
color: white;
font-size: 5.5rem;
}
.icon-wrapper i.icon {
display: block;
width: 8rem;
height: 8rem;
line-height: 8rem;
border-radius: 50%;
opacity: 0.5;
transition: all .2s;
}
.icon-wrapper:hover i.icon {
opacity: 1;
box-shadow: 0 0 0 1.5625rem green, /* <-- = the parent's background-color */
0 0 0 1.875rem #9b59b6;
}
.icon-facebook {
background-color: #3b5998;
}
.icon-twitter {
background-color: #23dcd5;
}
WORKING DEMO.
I have 2 images that are changing when I hover on the first one.
On the second one, I have some text because I want a link there.
My problem is now that I want the hover image to remain when I hover over the link.
Here is my code:
#blur {
border: 1px solid #bebfc1;
position:relative;
height:450px;
width:300px;
margin:0 auto;
-webkit-transition: border 1s ease-in-out;
-moz-transition: border 1s ease-in-out;
-o-transition: border 1s ease-in-out;
transition: border 1s ease-in-out;
}
#blur 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;
}
#blur:hover {
z-index:2;
border: 1px solid #000000;
}
#blur img.top:hover {
opacity:0;
}
#blur .text {
position:absolute;
color:#bebfc1;
opacity: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;
font-family:"Segoe UI Light";
font-size:13px;
}
#blur:hover .text {
opacity:1;
}
<div id="blur">
<img class="bottom" src="http://s28.postimg.org/do5izc4gd/image.png" />
<img class="top" src="http://s28.postimg.org/a5tj2y3kd/image.png" />
<p class="text" style="bottom:6px; left:180px;">link</p>
</div>
When I hover over the link I want the red image to remain the same.
How can this be done?
Thanks !!!
DEMO here http://jsfiddle.net/VYR9q/
Okay, I fixed it in the fiddle line you provided :)
Here you are what I fixed:
#blur:hover .top {
opacity:0;
}
Instead of:
#blur img.top:hover {
opacity:0;
}
Edit from: #biziclop:
You can make it:
#blur:hover img.top
I think you should simply move :hover from the img to the common parent #blur
#blur img.top:hover {
to
#blur:hover img.top {
Live example: http://jsfiddle.net/VYR9q/2/
Change your css to :
#blur:hover img.top {
//your css
}
I'm trying to change the attributes of one div from another div's hovering. Both of the div's has their own unique ID and I'm wondering if this is possible.
Here is the jsfiddle link:
http://jsfiddle.net/Ngx5D/
And here is the sample code:
body {
background-color:lightgrey;
}
#div_one, #div_two{
background-color:darkred;
display:block;
width:300px;
text-align:center;
padding:30px;
margin:10px;
color:white;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
#div_one:hover {
background-color:red;
}
Write like this:
#div_one:hover + #div_two{
background-color:red;
}
Check this http://jsfiddle.net/Ngx5D/1/