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;
}
}
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');
});
Hello I am using the target method to manipulate different div styles, for the first "link_one" everything is working, while I have only one link, the question is how to make it work for "link_two" ? So link_two will do the second part of the css ? What is more important here is that each link is maniluplating 2 different classes in which link one and two one of the class is the same.
link_one
<div id="sections">
<div id="link_one">info</div>
<div id="link_two">info</div>
</div>
/* link one code */
#sections:target #link_one{
height:90px;
background:#333;
transition:all 1s ease;
}
#sections:target .rslides {
height:0px;
transition:all 1s ease;
}
/* link two code */
#sections:target #link_two{
height:90px;
background:#333;
transition:all 1s ease;
}
#sections:target .rslides {
height:0px;
transition:all 1s ease;
}
One way to apply the target selector would be:
for this HTML
link_one
<br>
link_two
<div id="sections1"></div>
<div id="sections2"></div>
<div id="link_one" class="link">info</div>
<div id="link_two" class="link">info</div>
Set this CSS
.link {
height: 20px;
transition:all 1s ease;
}
#sections1:target ~ #link_one{
height:90px;
background:#333;
}
#sections2:target ~ #link_two{
height:90px;
background:#333;
}
fiddle
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.
What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!
***I'd prefer a pure CSS/HTML solution as I don't use javascript.***
What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.html and mouseover some of the links).
What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).
I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/ but would like to have the option of an image in the top left corner.
Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay.
The first two css classes are what you need in your code, rest is just for example.
http://jsfiddle.net/ctJ3d/8/
.popupBox {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
transition: all 0.4s ease;
transition-delay: 1s;
}
.popupHoverElement:hover > .popupBox {
visibility:visible;
opacity:1;
transition: all 0.3s ease;
transition-delay: 0s;
}
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
}
<div id="button" class="popupHoverElement">
<h3>hover</h3>
<div id="two" class="popupBox">Hovered content</div>
</div>
I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/
HTML:
<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>
CSS:
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}
There is a tutorial called Sexy Tooltips with Just CSS that might be exactly what you're looking for. There are two things to watch for:
This solution requires that your tooltip be in your HTML markup, instead of reading from the title attribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the title attribute as the value of the content property for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltips and Stack Overflow: How to change the style of Title attribute inside the anchor tag?
If you are still providing support for older browsers, be aware the IE7 will not obey the :hover selector for anything but A tags. If you need the tooltips to appear in IE7 for any element but an A tag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.
<div id="one"><h3>hover over me</h3>
<div id="two">Hovered content</div>
</div>
#one {
background:#443322;
position:relative;
width:100px;
height:30px;
display:block;
color:#FFFFFF;
}
#two {
background:#223344;
position:absolute;
width:100px;
height:100px;
display:none;
color:#FFFFFF;
}
#one:hover #two {
display:block;
left:100px;
}
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