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
Related
I'm trying to add a cool little opacity transition for my extension. I've looked up many ways to go about this, and nothing has seemed to work so far. Is this even possible? I have the latest version of Chrome.
A preview of it not working
CSS:
.container .primary:after {
opacity: 0;
transition: opacity 6s ease-out;
}
.container .primary:hover:after {
opacity: 1;
content: "Go through a list of friends to remove";
position: absolute;
top: 100%;
width: 100vw;
height: 20px;
margin: 10px;
font-size: 13px;
}
It's hard to reproduce from your code but there's a few main problems:
Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.
It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.
You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.
And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:
.container {
position: relative;
padding:10px;
font-family:'Arial';
border:1px solid black;
}
.container .tooltip {
opacity: 0;
transition: opacity 0.4s ease-out;
position: absolute;
top: 100%;
left: 0;
height: 20px;
padding:10px;
font-size: 13px;
}
.container .primary:hover .tooltip {
opacity: 1;
}
<div class="container">
<div class="primary">div
<div class="tooltip">"Go through a list of friends to remove"</div>
</div>
</div>
see that the background is not repeated for the long text.
The red/ maroon color is an image sliced as a whole (no middle portion sliced) or in other word its a single image.
Say that I sliced the middle part so that it can repeat as the menu grows longer, how can I include it in the css?
This is how I include the single image currently.
ul a:hover{
background-image: url("<?php echo get_template_directory_uri()?>/images/slices/slanted-hover.gif");
color:#fff;
background-repeat: no-repeat;
min-width: 50px;
}
Expected result like below, where the whole word is covered by the background image:
If still not clear, please see here:
All I want to do is,
I want the black rectangle to be repeated. Ideally when I slice it's going to be there images. So how do I use it as a background for menu (putting together all there images) and repeat the middle (black rectangle) repeat?
You do not actually need to use any image for that purpose. A simply trick using just CSS 2D transform and pseudo-elements will work fine, and these two specs are widely supported across modern browsers in use.
The only modification you need for your markup is to wrap your link text in an additional <span> element, for proper z-index stacking to work.
The only caveat with this trick is that when you apply a skew, part of the skewed pseudo-element will protrude out of the bounding box of the parent element. This protrusion is dependent on the skew angle and the height of the link, but can be accounted for by setting left and right paddings on the <ul> element to ensure they don't overflow.
ul {
background-color: #eee;
list-style: none;
padding: 0 1.5rem; /* Spacing to account for skewed edges protruding out of box */
margin: 0;
overflow: hidden;
}
ul li a {
color: #000;
float: left;
padding: .75rem 1.5rem;
position: relative;
transition: all .25s ease-in-out;
}
ul li a span {
position: relative;
}
ul li a::before {
background-color: #b13131;
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: skew(-10deg);
transition: all .25s ease-in-out;
opacity: 0;
}
ul li a:hover {
color: #fff;
}
ul li a:hover::before {
opacity: 1;
}
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2 that is a little bit too long</span></li>
<li><span>Item 3</span></li>
</ul>
Pure CSS solution, should work in all major browsers including IE >= 9.
ul a {
position: relative;
}
ul a:hover::after {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: -.8em;
bottom: 0;
left: -.8em;
background-color: red;
transform: skewX(-15deg);
}
I have a series of round images that are part of an image gallery. I’ve added an overlay and positioned the text in the location that I want, but now the overlay is removing the URL link to the image, and I'm trying to get the overlay to retain the link.
I’m working with a SquareSpace template so I can’t move any of the blocks around as they are rendered by CMS.
The text is in this here: .image-slide-title, and the image is here: .thumb-image .loaded, and the link has these classes: image-slide-anchor .content-fit
This is the page I'm working on: https://cesare-asaro.squarespace.com/work
And this is the code that I have so far for this particular section:
#portfolio {
background-repeat: repeat;
background-color: rgba(239,93,85,1);
}
.margin-wrapper:hover { //for portfolio hovers
position: relative;
}
.margin-wrapper:hover a:after {
opacity:.8;
}
.margin-wrapper a:after {
border-radius: 50%;
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,0.8);
opacity: 0;
transform: scale(1.002)
margin: 0 -50% 0 0;
transition: all .7s;
-webkit-transition: all .7s;
}
.sqs-gallery-container{
overflow: visible;
}
.margin-wrapper:hover .image-slide-title{
opacity:1;
color: rgba(239,93,85,1);
-webkit-transition: all .7s;
}
.image-slide-title{
font-size: 50px;
text-transform: uppercase;
line-height: 100%;
opacity:0;
position: absolute;
margin: -100% 0;
height:100%;
width: 100;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
white-space: normal;
}
I’m getting quite confused by the different approaches, some with JS some without, and the multiple uses of :after and :hover (I just tinker a bit with code).
Your overlay is probably blocking the click event to the thing below it, preventing it from triggering the link.
Just add pointer-events: none to the overlay. This will make it not capture the click, allowing it to fall to the element below it.
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; ... }
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.