I'm working on a transition onmouse hover an div. The effect should be a text merging from the top to the middle of the div while the div turns from square to circle. The problem is that if in FireFox the square to circle effect works but not the text droping down from top, this effect only works on Chrome and IE. Does anyone encounter this before and can someone tell me why this is happening?
The code of my buttons are below:
#navigation{
font-size:14px;
float:left;
left:0;
height:100%;
position:static;
width:65px;
margin-top:6.5%;
margin-left:10%;
}
#tab1{
float:left;
width:65px;
height:65px;
left:0;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
margin-top:40px;
box-shadow: 1px 1px 2px #000;
}
.tab1h{
width:65px;
height:65px;
visibility:none;
position: absolute;
opacity: 0;
vertical-align: middle;
text-align:center;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
}
#tab1:hover {
border-radius:50%;
overflow:hidden;
visibility:none;
}
#tab1:hover > .tab1h {
visibility:visible;
float:left;
opacity:1;
padding-top:20px;
}
<div id="navigationi">
<a href="index.html" >
<div id="tab1" style="background-color:#f5f4f0; font-size:14px;">
<div class="tab1h">
Home
</div>
</div>
</a>
</div>
So here is my html and css also here is a JSFiddle http://jsfiddle.net/MFcS5/.
Thanks,Victor
Removing overflow:hidden from #tab1:hover solves the problem. Here's a fiddle showing it working as intended in Firefox (as well as Chrome and IE).
It could be caused by this bug: "CSS transitions don't start due to frame reconstruction of ancestor or self..."; changing the overflow causes #tab1 to be redrawn at the same time as the transition is supposed to start, so its child .tab1h doesn't get to transition.
Related
I'm trying to do a sidebar for my html page. But i could not adjust the width of the sidebar. Also the menu icon when click should be closing/open the sidebar but it does not work.
Im a new learner , please help.
My code at here!
#sidebar {
background:#151719;
height:1000px;
width:20%; <!--- Cannot adjust width --->
position:absolute;
left:-248px; <!--- this will let the sidebar disapper --->
transition:all .3 ease-in-out;
-webkit-transition:all .3 ease-in-out;
-moz-transition:all .3 ease-in-out;
-ms-transition:all .3 ease-in-out;
-o-transition:all .3 ease-in-out;
}
You are close, but comment separators should be /*..*/, not <!---..--->. CSS is not HTML. Those comments prevent the CSS from being parsed correctly.
Then there is a #sidebar {width: 100%; halfway down, which overrides the width:248%; on the top.
And finally, the selector for moving the sidebar on selecting the checkbox should be #menuToggle:checked ~ #sidebar. Yours did nothing.
If you correct those errors, the page works flawlessly.
*{padding:0px;
margin:0px;
font-family:sans-serif;}
#sidebar{
background:#151719;
height:1000px;
width:248px; /* Cannot adjust width */
position:absolute;
left:-248px; /* this will let the sidebar disapper */
transition:all .3 ease-in-out;
-webkit-transition:all .3 ease-in-out;
-moz-transition:all .3 ease-in-out;
-ms-transition:all .3 ease-in-out;
-o-transition:all .3 ease-in-out;
}
#sidebar .menu li{
list-style-type:none;}
#sidebar .menu a{
text-decoration:none;
color:rgba(230,230,230,0.9);
display:block;
padding:15px 0;
border-bottom:1px solid rgba(100,100,100,0.45);}
#header{
width:100%;
height:5%;
margin:auto;
border-bottom:1px solid #EEE;}
#header .brand{
float:left;
line-height:50px;
color:#151719;
font-size:30px;
font-weight:bold;
padding-left:20px;}
#sidebar{
/* width:100%; */ /* removed because this would override the 248px above */
text-align:center;}
#sidebar .menu li:last-child a{border-bottom:none;}
#sidebar a:hover{
background:grey;
color:black;}
.menu-icon{
margin:2.5px 5px 0px 0px;
padding:10px 15px;
border-radius:5px;
background:#151719;
color:rgba(230,230,230,0.9);
cursor:pointer;
float:right;}
#menuToggle:checked ~ #sidebar {
position:absolute;
left:0;} /* Not sure is it correct or not, by clicking the checkbox, the sidebar should be displayed nicely, back to original */
<input type="checkbox" id="menuToggle" style="display:none;">
<label for="menuToggle" class="menu-icon">☰</label>
<div id="header">
<div class="brand">Cinema</div>
</div>
<div id="sidebar">
<ul class="menu">
<li>Dashboard</li>
<li>Help Center</li>
<li>Summary</li>
<li>Customer Interface</li>
</ul>
</div>
you can set width like this :
width: 20vw;
left: 0; // left: -20vw;
Your styles are applied to the #menuToggle item. Therefore the sidebar never hears about this change.
#menuToggle:checked {
position:absolute;
left:0;
}
Also because both elements do not have HTML relations, a CSS workaround might be risky. It's important to mention the selector #menuItem ~ #sidebar which will select #sidebars that precede #menuItem.
#menuToggle:checked ~ #sidebar {
position:absolute;
left:0;
}
Although it is definitely more prone to break in the future when the website has more content.
I suggest you have an event listener on the checkbox to toggle a class on the sidebar element. This can be done like so:
document.getElementById('menuItem').addEventListener('change', function(e) {
let sidebar = document.getElementById('sidebar');
this.checked ?
sidebar.classList.add('active') :
sidebat.classList.remove('active');
});
My current situation:
http://jsfiddle.net/VOXRAZR/2a6r4/2/
My current problem:
Height of the div doesn't have transition effect and the outer div's height increases on hover (i dont want that!)
HTML
<div id="black_bar"></div>
<div id="top_nav">
<div class="menu" id="home">HOME</div>
<div class="menu">LIST OF CAR MANUFACTURERS</div>
<div class="menu">WHY USE CARZPEDIA?</div>
<div class="menu">ABOUT US</div>
<div class="menu">CONTACT US</div>
</div>
CSS
body{
margin:0;
}
#top_nav{
background-color:#000;
height:auto;
}
#top_nav a{
text-decoration:none;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
}
.menu{
display:inline-block;
padding:1em;
font-size:1em;
}
.menu:hover{
background-color:#09F;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
height:3em;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
#home{
color:#09F;
}
#home:hover{
color:#FFF;
}
Simply set a fixed height for the top bar (this is #top_nav in your CSS), and (optionally) set overflow:hidden; on it too (or the content will pop out when you hover over it. don't know if this is intentional)
See this fiddle with overflow hidden
Or this one with overflow visible
I have the following codepen, this is a basic positioned label with the number and marker text:
<span href="#" class="part-marker">
1<span> marker text</span>
</span>
How can I get it to slide out on hover using css3 transitions? I've tried using this with no success??
See below a simplified version- the crux here being that you cant make a transition on properties that don't scale, so where you have the element going from display:none t inline-block it simply goes from hidden to shown as there are no intermediary points. What you can do instead is use a combination of max-width and overflow as outlined below.
Demo Fiddle
HTML
<div> <a href='#'>1</a>
<span>Label</span>
</div>
CSS
a {
display:inline-block;
background:blue;
color:white;
padding:0 5px;
}
div {
position:relative;
}
div span {
position:absolute;
display:inline-block;
max-width:0;
overflow:hidden;
transition:all 1s ease-in;
}
a:hover+span {
max-width:100%;
}
Take a look at this code:
HTML
<a href="#" class="marker-label" text="marker text">
1
</a>
CSS
.marker-label {
display:block;
background:blue;
color:white;
padding:4px 8px;
font-size:1em;
line-height:1;
position:relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
width:10px;
}
.marker-label:hover {
width:80px;
}
.marker-label:after {
content:attr(text);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
position:absolute;
left:-100px;
}
.marker-label:hover:after {
left:20px;
}
And here is a FIDDLE
You can use a negative text-indent too : http://codepen.io/anon/pen/xalDc/
span {
text-indent:-150px;
overflow:hidden;
display:inline-block;/* triggers layout */
transition: all 1s ease-in-out;
/* position:absolute ; not needed since a is already so */
}
&:hover {
span {
text-indent:0;
}
}
I have developed an CSS and HTML code to create some kind of accordion multi-banner. I'm not using javascript at all.
Every thing works fine,except for I issue I can not resolve:
Start point is the first image "expanded"
If you hover over some other image, the former hovered one srinks,and the current also expand. Remainig ones accomodate their witdh
PROBLEM: if you hover fast from left to rigth to the last image you come to a point where you can over a greyed on (wrapper background) and all iamges remain then collapsed.
A must should be that,always, no matter what, there's at least one image expanded to show let's say an ad,product to choose...
How can I resolve that? The reason I'm not using width:auto is that it currently doesn't make any transitions with that value set.
CODE at http://jsfiddle.net/7NR4Y/
<style type="text/css">
#wrapper div.sector {
width:50px;
height:250px;
background-position:top center;
background-repeat:no-repeat;
float:left;
max-width:300px;
opacity:0.5;
overflow:hidden;
-webkit-transition:all 1s ease-out; /* Chrome y Safari */
-o-transition:all 1s ease-out; /* Opera */
-moz-transition:all 1s ease-out; /* Mozilla Firefox */
-ms-transition:all 1s ease-out; /* Internet Explorer */
transition:all 1s ease-out; /* W3C */
}
#wrapper #first{
width:300px;
max-width:300px;
min-width:50px;
opacity:1;
}
#wrapper:hover div.sector{
width:50px;
max-width:100%;
opacity:0.5;
}
#wrapper:hover #first{
width:50px;
max-width:100%;
}
#wrapper div.sector:hover{
width:300px !important;
opacity:1;
}
</style>
<body>
<div id="wrapper" style="width:500px; height:250px; background-color:#CCC; overflow:hidden; position:relative;">
<div id="first" class="sector" title="Imagen 1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTpTF_3Pjjnsum_miN1hicvsPb-44qUm4Qban2_MfzEHevwK0_" /></div>
<div class="sector" title="Imagen 2"><img src="http://1.bp.blogspot.com/-dazqpbQnahc/UaxhFz6mwgI/AAAAAAAAGJQ/pVhtFcqEBiY/s640/Ideal-landscape.jpg" /></div>
<div class="sector" title="Imagen 3"><img src="http://2.bp.blogspot.com/-XegWV6RbUmg/UKIA7m7XgDI/AAAAAAAAAtA/6yQKXMkTjmA/s640/village-vector-the-dock-pixels-tagged-beach-landscape-512305.jpg" /></div>
<div class="sector" title="Imagen 4"><img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" /></div>
<div class="sector" title="Imagen 5"><img src="http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg" /></div>
</div>
I have added the following to your CSS
a:last-child div.sector {
position: relative;
overflow: visible !important;
}
a:last-child div.sector:after {
content: "";
position: absolute;
left: 100%;
top: 0px;
height: 100%;
width: 100px;
background-color: green;
}
This creates a pseudo element after the last div of your series.
This pseudo will receive the hover state and transmit it to the element. This, way, even if the cursor goes in the zone of the wrapper that gets exposed sometimes, it will still get it selected.
I have it green so that you can se what is happening, of course in production make it transparent.
fiddle
Disregard all the previous answer !
All you need is
a:last-child div.sector {
overflow: visible !important;
}
fiddle 2
Background
I'm customising a tumblr theme (Source: hasaportfolio), and I am trying to change the size of one particular element.
This element, on :hover, is meant to transition opacity - "fade in". What is happening, however, is that once I change the pixel sizes the transitions refuse to work, and the newly appearing content does not appear at all.
HTML Code
The HTML code this is being applied to is as follows. I've commented it as well as I can.
<div class="post video featured"> <!-- wrapper, no css attached -->
<div class="box-featured">
<iframe src="http://player.vimeo.com/video/30284533" width="750" height="430" frameborder="0"></iframe>
<div class="box-caption-text-featured"> <!-- this div and content is "hidden" (0% opacity) until :hover -->
<h1>Paint</h1>
<p>I hate yogurt. It's just stuff with bits in.</p>
<p>You know how I sometimes have really brilliant ideas? You've swallowed a planet!</p>
</div><!-- box-caption-text-featured -->
# <!-- this a is the "trigger" for the transition. Normally it would link to the post permalink -->
</div><!-- box-featured -->
</div><!-- post -->
I also have another copy of this code, the only difference is that it is without the -featured at the end of each class definition. This is so I can see if the code works at its 'original' size (which it does).
CSS Code
The original code for running these boxes follows:
.box { float:left; width:250px; height:130px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption, { width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:transparent; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text { color:#fff; width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }
My changed code is as follows. The only things I have changed are the width and height pixel values.
.box-featured { float:left; width:750px; height:430px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption-featured { width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:#f00; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text-featured { color:#fff; width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption-featured { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text-featured { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }
Have I just missed something dumb, or is there an issue in this code that prevents what I'm trying to do?
Example Page
There's an example of what I'm taking about over here.
What i'm thinking at this point is that you need to change it to:
.box-featured:hover