I am trying to recreate an effect I saw on "TheButton" subreddit. You can see that next to most usernames there is a colored dot that when hovered over expands and reveals some underlying text.
Using their CSS as a starting point, I can recreate this effect but my issue is that the underlying text I have does not collapse, so I never achieve a "dot" shape while the user is not hovering.
Here's my CSS:
* {
font: normal x-small verdana,arial,helvetica,sans-serif;
}
.flair {
min-width: 12px;
max-width: 12px;
height: 12px;
line-height: 12px;
border-radius: 12px;
border: none;
overflow: hidden;
padding: 0;
vertical-align: middle;
font-size: 10px !important;
-webkit-transition:all 0.3s;
transition: all 0.3s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
position: relative;
}
.flair:hover {
max-width: 500px;
padding: 0 5px;
color: #fff;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.flair-no-press {
background:#888;
color:#888;
}
And here's my HTML:
<span class="flair flair-no-press" title="non presser">non presser</span>
Here's a jsfiddle showing what this looks like. Once again my intended effect is simply making the dot collapse entirely when not being hovered over like they have.
What am I missing here?
Related
I'll get straight to the point. What I want to do is to create simple text, such as: © 2017, that will change (on hover) to developed by Jonathan Doe. I want activation field to be smaller than the deactivation field but the problem is that hitbox for the © 2017 is the size of hidden element.
I was looking for the solution on the internet for quite some time but everything that I found, was button with not flexible width. Maybe I need to use some sort of tooltip, that will cover passive state? I am not sure.
I want this element to float in the bottom left cornet of the site, that's why I set position to fixed.
The other problem is that when text developed by Jonathan Doe is active, deactivation field is bigger on top than it should be. It looks like elements with 0 opacity are messing up my hitboxes. I was trying to play with display: none;, but then animation is not playing.
I started to code literally yesterday, so please forgive me for all the noob mistakes. I am trying to understand the logic behind all of this.
I've added the piece of code, I hope I did it right.
.con {
position: fixed;
font-weight: normal;
color: #000000;
font-family: 'Roboto', sans-serif;
z-index: 99;
}
/* © 2017 */
.con.copyright:before {
position: fixed;
padding: 9px 16px 7px 16px;
bottom: 16px;
left: 16px;
font-size: 14px;
line-height: 26px;
text-align: left;
content: '© 2017';
opacity: 1;
transition: all 0.3s cubic-bezier(.64, 0, .36, 1);
}
.con.copyright:hover:before {
opacity: 0;
bottom: 32px;
}
.con.copyright:after {
position: fixed;
padding: 9px 16px 7px 16px;
bottom: 0px;
left: 16px;
font-size: 14px;
line-height: 26px;
text-align: left;
content: 'developed by Jonathan Doe';
opacity: 0;
transition: all 0.3s cubic-bezier(.64, 0, .36, 1);
}
.con.copyright:hover:after {
opacity: 1;
bottom: 16px;
}
<div class="con copyright"></div>
I do not like how you can keep developed by Jonathan Doe text active by quickly moving your mouse over it.
It took me few additional days but I think I've finally did this. Hitboxes are perfect. The only one problem now is that for some unknown reason, text is not antialiased. I was playing with some values but nothing helped.
EDIT: I've came out with better version. Less messy and with working antyaliasing.
Here is the new version - maybe some beginner like myself will find this useful. I will update it if I discover anything new:
EDIT: I've: • added transition-delay and reversed it so that effect is properly played on "mouseout"
EDIT: I've: • replaced visibility: hidden; with pointer-events: none; because with greater transform: translateY values "mouseout" was glitchy • split transition: all to transition: transform, opacity and removed transition-delay to get better control over delays
EDIT: Minor adjustments for better UX
* {
box-sizing: border-box;
}
/* copyright */
.copyright {
position: fixed;
color: #000000;
font-family: 'Roboto', sans-serif;
font-size: 14px;
left: 16px;
top: 16px;
text-align: left;
width: 78px;
height: 42px;
z-index: 10;
}
.copyright:before {
pointer-events: none;
position: absolute;
display: block;
top: 13px;
left: 16px;
opacity: 1;
content: '© 2017';
transform: translateY(0px);
transition: transform .24s 0s ease, opacity .16s .08s ease;
}
.copyright:hover:before {
transform: translateY(-24px);
transition: transform .24s 0s ease, opacity .16s 0s ease;
opacity: 0;
}
.copyright_ch {
position: absolute;
opacity: 0;
padding: 13px 0px 0px 16px;
top: 0px;
left: 0px;
pointer-events: none;
width: 205px;
transition: transform .24s 0s ease, opacity .16s 0s ease;
height: 100%;
transform: translateY(24px);
}
.copyright:hover .copyright_ch {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
transition: transform .24s 0s ease, opacity .16s .08s ease
}
<div class="copyright"><div class="copyright_ch">developed by Jonathan Doe</div></div>
note: This is not really a flexible solution. If you would like to change inscriptions, font size, hitboxes etc., you will have to change and adjust values manually. To get a good look at current hitboxes add background-color: #cccccc; to .copyright and .copyright_ch classes. You might also want to play with opacity: 0/1 so that you can see what you are working with.
i have a problem to use transition on a styled anchor.
it should expand to a higher width and show a glyphicon. i tried it width max-width but i think i miss something. the glyphicon works but not the "animated" width.
html:
<a class="link" href="/"> Order <a/>
css:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: max-width 1000ms ease-in-out;
-webkit-transition: max-width 1000ms ease-in-out;
-moz-transition: max-width 1000ms ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
https://jsfiddle.net/Lg7kutpp/
Your code is not working, because it has no working width. It's changing size because of the padding, and therefore the transition:max-width will not work.
Easy way to fix with your code is to add transition:all.
Check this:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order></a>
I you just want to go with the transition only for the width property, you should add display:inline-block and a width property to the anchor class.
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
width: 100px;
display: inline-block;
text-align: center;
padding: 10px 15px;
transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
width: 150px;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order</a>
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
transition: 1000ms ease-in-out;
-webkit-transition:1000ms ease-in-out;
-moz-transition:1000ms ease-in-out;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
You should add the transition on the hover selector without max-width
https://jsfiddle.net/Lg7kutpp/1/
I believe you need to set max-width to something less than 100% in a.link.
What you're currently doing is setting max-width to 100% on hover, but the default setting of max-width is already 100%.
Either set max-width to something less than 100% under a.link, or set max-width to something greater than 100% under a.link:hover.
When it comes to the transition-property, you might as well write transition: all 1000ms ease-in-out rather than transition: max-width 1000ms ease-in-out, as using all will make sure that any animation on a.link will have the same properties.
Also, I'd recommend you don't use href="/" unless you intend to direct the user to the main page. If you just want an anchor that doesn't link anywhere, you can drop using href.
Hope this helps.
I am in the process of designing an animated menu. I tried to get the text in the boxes to change color and they do so, but it's rather glitchy. The text flashes after the transition, and when you hover over it. Here's the JsFiddle with the glitch.
I also noticed it works fine without the hover transition, except of course the text doesn't change color. Here's that one: Less glitchy one.
Please suggest a fix.
Glitchy code [I removed webkit]
/* CSS */
#keyframes box {
0% {
left: 0px;
width: 30px;
}
50% {
left: 30px;
width: 0px;
}
100% {
left: 30px;
width: 70px;
color: #FFF;
}
}
h1 {
position: relative;
left: 30px;
color: cyan;
font-family: 'Agency FB';
}
div {
position: relative;
height: 30px;
width: 0px;
left: 0px;
background-color: cyan;
color: transparent;
animation: box 1.0s forwards;
transition: all 0.5s ease;
}
div:hover {
background-color: #FFF;
border: 1px solid cyan;
}
div:hover label {
color: cyan;
}
label {
position: absolute;
left: 5px;
font-family: 'Agency FB';
transition: all 0.5s ease;
}
<!-- HTML -->
<h1>
Test
</h1>
<div id="1">
<label>Hello</label>
</div>
<br>
<div id="1">
<label>World</label>
</div>
<br>
<div id="1">
<label>Foobar</label>
</div>
I can see the glitch, but probably is because of this:
transition: all 0.5s ease;
maybe you have other color fot the text in the parent, if you only want the transition on the background-color useit only there
transition: background-color 0.5s ease;
andto avoid the change of height you can use this
box-sizing: border-box;
I don't know what exactly you mean by "glitchy".
First of all I would change:
border: 1px solid cyan;
To:
outline: 1px solid cyan;
Border made this div move a little bit when hover works.
I'm fairly new to the CSS/HTML world. I am creating an interactive image using html hotspots, CSS and bootstrap to create modal information about certain parts of the image. The image is very wide (its a process road map) and will be used on a large touch screen for a presentation only. The issue I am having is that when the bootstrap modal is opened it appears at the zoom level of the browser. Since this is a very large image and the user can zoom in and out I need to make the data on the modal appear static in size/zoom. I have used viewpoints to keep the size of the text static and this works well for 100+ - 60% zoom. What does not work well is when I zoom far out the text overlaps itself, 50% or less which is possible if people want to see the whole image before clicking the link to open the modal. The layout on the modal is two rows of three columns using bootstrap. The columns do not overlap its that the text wraps over itself. I'm not sure how to fix this problem or perhaps another approach is better all together.
I have played with changing the size of the image which helps some, but at some point varying zooms will be used no matter what image size I use thus the problem occurs.
What it is doing at 45% zoom, text size is OK but its overlapping:
What I need it to look like at any zoom:
CSS for modal content:
/**** Start details Model Content Section ****/
.details, .details-2 {
padding-bottom: 80px;
}
.details {
text-align: center;
min-height: 100px;
}
.details h4{
font-size: 2.5vmin;
color: #666;
font-weight: 300;
font-family: 'Oswald', sans-serif;
}
.details-2 h4{
font-size: 2.5vmin;
color: #444;
padding-bottom: 10px;
font-weight: 300;
font-family: 'Oswald', sans-serif;
}
.details p, .details-2 p {
color: #444;
font-size: 2vmin;
line-height: 20px;
font-weight: 300;
}
.details i {
font-size:3.5em;
color:#fff;
background: #FF432E;
width: 100px;
height: 100px;
padding:25px;
margin-bottom: 10px;
-webkit-border-radius:70%;
-moz-border-radius:70%;
-o-border-radius:70%;
border-radius:70%;
position: relative;
box-shadow: 0 0 0 30px transparent;
-webkit-transform: translate3d(2, 2, 2);
-moz-transform: translate3d(2, 2, 2);
-o-transform: translate3d(2, 2, 2);
transform: translate3d(2, 2, 2);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
}
.no-touch .details:hover i,
.no-touch .details:active i,
.no-touch .details:focus i {
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
box-shadow: 0 0 0 0 #FF432E;
}
.details-2 i {
color:#FF432E;
font-size:3em;
padding:1px 10px 0 1px;
position: relative;
}
.container {
width: 96%;
height: 96%;
}
/**** End details Modal Content Section ****/
<meta name="viewport" content="width=device-width, initial-scale=1"> should help on mobile scaling problems.
Place between the <head> and </head>
I have the following CSS code:
.special {
height: 20px;
width: 125px;
border-bottom: 0px #69D2E7;
border-radius: 10px 10px 0px 0px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
letter-spacing:1px;
opacity: 0.5;
transition-property: opacity;
transition-duration: 500ms;
text-transform: uppercase;
right: 0px;
position: fixed;
bottom: 0px;
z-index: 6969;
}
.special:hover {
tranisition: opacity 500ms, border-bottom 500ms;
opacity: 1.5;
border-bottom: 200px #69D2E7;
}
I'm trying to make it so when hovered, it gets bigger (border-bottom height increases), and opacity changes. Opacity does, with the element I have, but the height doesn't increase. What am I doing wrong ?
http://jsfiddle.net/7U3xn/
Here's an example to see how it works.
You need to add a border-style. For instance, you can use solid:
UPDATED EXAMPLE HERE
.special:hover {
transition: opacity 500ms, border-bottom 500ms;
opacity: 1.5;
border-bottom: 200px solid #69D2E7;
}
Also, fix the typo as MarcB points out. It should be transition not tranisition.
tranisition: opacity 500ms, border-bottom 500ms;
^^---typo
Syntax errors in CSS blocks kill the rest of the css directives BELOW the error. If you'd bothered looking at your browser's developer console (e.g. shift-ctrl-J) in Firefox, you'd have seen the CSS error...