I'm creating a function where you hover over a div, which will result in another div appearing; a simple, CSS-only pop-over.
However, whenever the pop-over-div has an opacity:0, it still has a physical height and width, rendering other divs under the pop-over unreachable.
I know I can work with display:none and display:block, but this will remove the possibility of adding a smooth "arrival" of the div; it'll just pop in and out of the screen.
The question: Is there a way to remove the physical dimensions of a div with opacity:0?
In my JSfiddle, you will notice you can get the .iconhover to appear when you hover over the H or e. If you hover over the rest of the word, you're officially hovering over .iconhover and not .wishicon, resulting in the pop-over not showing up.
I hope my question is clear enough.
HTML
<div class="qs">
<div class="wishicon">Hello world</div>
<div class="iconhover">Hovering...</div>
</div>
CSS
.iconhover {
height: auto;
width: 100px;
margin-left:-0px;
color: #fff;
background-color: #666;
box-shadow: 0 1px 0px rgba(0,0,0,1), 0 2px 0px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5);
margin-top:-20px;
margin-left: 20px;
border-radius: 5px;
opacity: 0;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
transition: opacity 0.5s, margin 0.5s;
-webkit-transition: opacity 0.5s, margin 0.5s;
padding:4px 20px;
text-align: center;
position:absolute;
float: left;
}
.qs > .wishicon:hover + .iconhover {
opacity: 1;
margin-top: -20px;
margin-left: 20px
}
I have a terrific solution which I use often.
On the element with opacity: 0 put pointer-events: none.
It will still have the dimensions, but it will be as if all events are inactive.
Then when you want it to be opacity: 1, return pointer-events to auto.
This is the next best thing to using display: block/none but it can be transitioned!
That would certainly be nice, but alas, I'm not aware of any "ghost" CSS property.
I would treat it the same as a hover menu: make the parent hoverable instead of the previous sibling:
.qs:hover > .iconhover { opacity: 1; ... }
Related
I have a simple css transition on the right property for a button which simply moves an arrow when you hover. The problem is that when you hover, it's not transitioning properly and if you refresh (or re-run) the JSFiddle, then you will notice that the arrow moves position after hovering.
It's like it moves back, then forwards then back again?
This appears to only happen in Firefox.
JSFiddle
Found the problem. Your span is inline, and giving it position: relative caused the issue.
Simply change to inline-block and you're good to go:
.genericBtn span {
display: inline-block;
position: relative;
}
How about using a more subtle approach by using CSS pseudo elements:
.genericBtn {
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 30px;
width: 300px;
position: relative;}
.genericBtn::after {
content: ">";
position: absolute;
right: 37%;
transition: all .3s ease-in;
}
.genericBtn:hover::after {
transform: translate(10px,0); }
Here is a Fiddle
I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).
Here you can see the both renderings:
FF: http://i.stack.imgur.com/wbHhG.png
Chrome: http://i.stack.imgur.com/1BFHu.png
HTML-Code:
<input type="file" class="button blue full-width" name="csv_file" id="csv_file">
CSS-Styles:
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
You can fix one of the issues by adding this css:
input[type=file]::-webkit-file-upload-button {
margin: 1px 0;
height: 48px;
}
This makes the button take up more height like in FF and also makes the text vertically centered..
Not so sure how to horizontally center it though, maybe someone else might know a trick.
A jsfiddle to show it working: http://jsfiddle.net/bcwk8qvt/
[edit]
You can make it centered horizontally by adding most of your original CSS to a div wrapped around the input field like this:
http://jsfiddle.net/bcwk8qvt/3/
You still need to keep some of the css on the input field too though for FF to show it the same way.
I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.
Background: I originally copied this idea from here: original form.
Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).
Now here's my demo:
My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).
So the code that's relevant to this problem is as follows.
The HTML code:
<button class="login-button"><span>SEND</span></button>
The CSS code:
.login-button{
width: 100%;
outline: none;
border:none;
cursor: pointer;
padding: 0;
margin:0;
transition:.3s;
}
.login-input , .login-button{
height: 50px;
line-height: 40px;
transition:.3s;
}
.login-button span{
display: block;
background:red;
height: 100%;
width: 100%;
left: 0;
transition:.3s;
position: relative;
}
.login-button span:before{
content: 'ok';
position: absolute;
left: 100%;
display: block;
}
.login-button:hover span:before{
content: 'OK To go now';
position: absolute;
/*left: 0%;*/
text-align: center;
display: block;
width: 100%;
height: 100%;
}
Now if I go to the CSS styling for the main container:
I.E.
.main-login{
min-width: 200px;
max-width: 400px;
background: #533e69;
margin: 100px auto;
text-align: center;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0,0,0,.2);
padding: 0 20px;
}
and take off the padding, then the problem is solved and the transition looks perfect.
The problem
My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.
Proposed solution
I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.
I am new to CSS, so my solution may be less elegant:
When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.
You need to set the background to be transparent. It's not possible for a transition to animate the display property.
Add this css code, and it should work:
.login-button:hover span{
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
transition: 2s;
background: rgba(1,1,1,0);
}
See your updated fiddle here.
Edit: I cleaned up the css a bit:
.login-button:hover span{
transition: 0.3s;
background: transparent;
}
Fiddle is here.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
-webkit-transition: color .2s, text-shadow .2s;
/* And so on... */
}
Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;
Or try this
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
This is the link
I'm trying to enlarge a circular element on hover to show more of the background.
I thought I managed to do it however the background moves slightly during the transition, this is what I have now:
http://jsfiddle.net/ANN32/
.foto-icono // The container
{
height: 250px;
text-align: center;
}
.foto-icono > div // The image without padding
{
border-radius: 50%;
width: 200px;
height: 200px;
padding: 0;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
.foto-icono > div:hover // More padding and a negative margin so it stays on the same position
{
padding: 20px;
margin-top: -20px;
}
I also tried changing the item height and width on hover (instead of the padding) but I randomly get a weird "tremble" from the background.
How can I do this?
As opposed to padding, i'd suggest adjusting a transparent border. This eliminates the issue on Chrome.
UPDATED EXAMPLE HERE
.foto-icono > div {
border:0px solid transparent;
}
.foto-icono > div:hover {
border:20px solid transparent;
margin-top:-20px;
}
I got it. remove text-align:center from your .foto-icono class.
here is updated fiddle: http://jsfiddle.net/ashishanexpert/ANN32/2/
I'm getting incorrect look in internet explorer 7,6, etc. It started when I added float: right; to #social-share div tag. I tried setting display: inline-block; to it and clear: both; but nothing worked for me.
You can see the issue live. Here is my code:
HTML
<header>
<div id="inner-border">
<div id="header-wrapper">
<div id="social-share">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4db8643a1c09a1ff"></script>
<!-- AddThis Button END -->
</div>
</div>
</div>
</header>
CSS
header {
width: 100%;
height: 115px;
background: #120c09;
margin: 50px 0 0 0;
border-top: 1px solid #100b07;
border-bottom: 1px solid #100b07;
}
#inner-border {
width: 100%;
height: 103px;
margin: 5px 0 0 0;
border-top: 1px dashed #291a10;
border-bottom: 1px dashed #291a10;
}
#header-wrapper {
width: 900px;
height: 103px;
margin: 0 auto;
}
#logo {
height: 230px;
width: 205px;
position: absolute;
z-index: 99;
margin: -57px 0 0 0;
background: url("../images/logo.png") no-repeat;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#logo:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#logo:active {
margin: -55px 0 0 0;
}
#social-share {
width: 280px;
float: right;
margin: -47px 0 0 0;
color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: 0.2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#social-share:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
This is correct look:
This is inncorrect look (ie7, 6)
Ignore css3 related stuff, the problem is that in ie 7,6 everything is squeezed to the top and search bar appears in the middle instead of on the right.
Your top nav is breaking up in IE7 because it is not properly defined what goes where and how. First, your logo is sort of "floating" inside of your document, since it is positioned absolutely with no point of reference in its container, so lets start by fixing that;
Add position:relative to your #header-wrapper CSS rule so we can properly contain your logo within its boundaries:
#header-wrapper {
position:relative;
}
Next, we have to rearrange your logo to properly sit in the middle of your #header-wrapper div. Previously you were using margin: -57px auto 0 auto; to align your logo but since you are already absolutely positioning it you don't really need margin at all (a miracle it was even working at all), so let's do some mathematics to absolutely position your logo in the middle of your header wrapper div:
First, we eliminate that margin declaration and replace it with the following:
#logo {
left: 50%;
top:-57px;
margin-left: -102.5px;
}
Now, what did we do here? First we pushed your logo 50% from the left and then pushed it back with a negative margin by -102.5 pixels. Why did we do this? Because the left declaration pushes your element with width added to the calculation, so the push actually means "50% to the left + width of your element", so, we use the negative margin to compensate for the width, 50% - width/2. Here is a better explanation of the process.
After the two changes I listed are complete, you will find that the logo sits behind your slideshow area, this is due to the ie7 z-index bug and the fix is actually very simple:
header {
position:relative;
z-index:999; /* ie7 z-index bug fix */
}
We fix it by defining your header section as position:relative and give it a higher z-index than your slideshow area, this way your logo will be over your slideshow.
Now to fix your search bar from positioning itself to the left instead of the right we have to define your #social-share section as position:absolute and then push it to the right by using right:0, why? Because IE7 is positioning your search bar right next to the #social-share who is being pushed to the top by using a negative margin, and thus is not being removed from the stream as expected (was surprised it actually worked in modern browsers). So, define your #social-share section as absolute and the problem is solved:
#social-share {
position:absolute;
right:0;
}
And the final fix is a conditional class that we're going to use to target your #_atssh <div> tag to position it relatively to your document. IE7 is not taking it into account because it is absolutely positioned and so that long space is removed.
We can take advantage of your conditional classes added to your <html> tag by the boilerplate and target IE7 alone with a fix:
.ie7 #_atssh {
position:relative;
}
Note: There is probably a billion typos and grammar errors, I wrote it during lunch so I'll comeback to this in the future and fix them.
looks like you need a clearfix:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
add this to the element that contains your floated element
Based off what I can see (sorry, no IE6 or 7 available), you might be able to fix this by using position and top instead of using the negative margins like this:
Remove the margin: -57px 0 0 0; from #logo to be top: 0px;. Since you're already using position: absolute;, this should place the logo at the top edge of the screen for you.
Remove the margin: -47px 0 0 0; from #social-share and instead add position: relative; top: -47px;
Including the proper clear or "clearfix" mentioned by JKirchartz may also be required.
Add the CSS property zoom: 1 to <div id="social-share">, header-wrapper, or inner-border.
I like how quirks mode explains the issue of hasLayout which is an IE6 & IE7 specific problem: http://www.satzansatz.de/cssd/onhavinglayout.html.