I'm having issues transitioning my text properly. I have a list with five hyperlink texts:
<div id="listContainer">
<ul id="wordList">
<li class="wordListItem"><a class="wordListLink" href="somewhere1.jsp">Word1</a></li>
<li class="wordListItem"><a class="wordListLink" href="somewhere2.jsp">Word2</a></li>
<li class="wordListItem"><a class="wordListLink" href="somewhere3.jsp">Word3</a></li>
<li class="wordListItem"><a class="wordListLink" href="somewhere4.jsp">Word4</a></li>
<li class="wordListItem"><a class="wordListLink" href="somewhere5.jsp">Word5</a></li>
</ul>
</div>
I use the #wordList to remove the bullets, the #wordListItem to display the words inline, and the #wordListLink to do the text transitions and font properties:
.wordListLink{
line-height: 50px;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
color: white;
font-size: 40px;
margin-right: 30px;
}
.wordListLink:link {
color: white;
}
.wordListLink:visited {
color: white;
}
.wordListLink:hover {
color: #838383;
transform: scale(1.1);
/*I've tried font-size: 45px but the transition moves the rest of the words over*/
}
And a list container to move the list to the right side:
#listContainer {
position: absolute;
bottom: 0;
right: 0;
}
What I'm trying to do is to increase the font size a little on hover. But with the transform: scale(1.1) the text increases but once it finishes increasing, it just snaps back to normal, while the mouse is still hovered. It doesn't remain at 1.1 scale for some reason. The problem with using font-size: 45px is that, first, the increasing moves the other words over to make room, and second, it increases the font leftwards and upwards instead of equally on all sides. Anyone have a fix for this?
The list items are not large enough to accommodate the text when you hover.
You should,
increase the width of the list items,
reduce the font-size change (say from 1.35em to 1.4em),
add a right margin.
Let me know, if it helps!
Related
I'm trying to give my flat icons a nice smooth scale effect on hover. I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
Thanks,
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
transition: all .2s ease-in-out;
}
.flaticon-city:hover {
transform:scale(1.3);
}
and this doesn't work either:
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
}
.flaticon-city:hover {
transform:scale(1.3);
transition: all .2s ease-in-out;
}
I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
The issue is simply that you specified transition for .flaticon-city:before, but apply the transform on .flaticon-city:hover.
Edit:
It “doesn’t work” in your example, because you have a problem with specificity:
#page-content #services .service i {
/* … */
transition: color .4s ease;
}
.flaticon-city:hover {
transform: scale(1.3);
transition: all 2s ease-in-out;
}
The first rule as higher specificity than the second one, but they both apply to the same i element that holds your icon – and therefor, you have now specified color as transition property only (because you have overwritten the transition), so changing the transform is not transitioned any more.
Just combine the two transitions into one:
#page-content #services .service i {
transition: transform 2s ease-in-out, color .4s ease;
}
So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
How would I go about doing this, as simple as possible?
Thank you ;3
Transitions work in both directions automatically.
The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.
This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.
But when you unhover it, it becomes none instantly and you can't see the width animating.
Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.
Add:
border-bottom: 0px solid white;
to the rules for p.
I don't know if this could help, but in my case I just did like this:
Over:
.<nameOfClass>:hover{
transition: width 0.4s ease-in-out;
}
No over:
.<nameOfClass>:not(:hover){
transition: width 0.4s ease-in-out;
}
Add border-bottom: 0px solid white to p. Css wants to know where to transition back to! :D
for transition add an animate class to the element you want the transition
.animate
{
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
Now when you add this class to your element it will make transition in both hover and hover out.
I'm trying to recreate a similar menu effect found on the World War Z movie site, but I can't seem get the CSS transition working correctly. I've gotten the hover element to display the hidden block, but the CSS transition wont work. I'm trying to get a cool effect that would slide from the top or bottom, I don't have a specific preference. Also if I try to go over any of the links, the submenu disappears before I can click on it. Here's the Fiddle.
HTML:
<ul id="menutitle">Menu Title</ul>
<ul id="submenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
CSS:
#topmenu {
background: #000;
width: 150px;
height: 50px;
color: #fff;
}
#submenu {
display: block;
position: absolute;
width: 110px;
display: none;
background: #333;
list-style: none;
line-height: 2em;
}
#menutitle:hover + #submenu {
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
#menutitle { color: #ff0000; }
a { color: #FF0; }
A few things:
Your :hover selector should be on the #topmenu element, not the title. That's why the nav area is disappearing so suddenly - it only takes hovering on the menu text.
You might have a little misconception of the animate property definition. You need to pick a specific property to animate; usually something like 'height'. In this case, my solution was to set "max-height". There may be some way of setting height to something like 'auto', but if so it's lost on me.
Additionally, the "transition" property is set on the object at all times - not just 'when hovering'. It's a sort of constant state to indicate "WHEN this property changes, do a smooth transition". That way, you can have a series of different states giving different heights.
http://jsfiddle.net/8YHbq/4/
#topmenu {background: #000; width: 150px; height: 50px; color: #fff; }
#submenu {display: block;
position: absolute;
width: 110px;
background: #333;
list-style: none;
line-height: 2em;
overflow: hidden;
max-height:0;
transition: max-height 0.7s ease-in;
}
#topmenu:hover #submenu {
max-height: 200px;}
#menutitle {color: #ff0000;}
a {color: #FF0}
Currently, the one issue with my version that I'm just now realizing is that since max height animates to 200px, the nav menu will be fully expanded before it reaches 200 - making the animation less smooth. Maybe you could adjust that a bit based on your needs.
please check out this code in jsfiddle
HTML:
<div id="main">
<div id="menu">
Home
About Us
Pictures
Contact Us
</div>
</div>
CSS:
#main
{
width: 64em;
height: 25em;
}
#menu
{
background-color: #00b875;
height: 3em;
}
.buttons
{
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.buttons:hover
{
background-color: #0d96d6;
}
when switching from one button to another very quickly, you'll notice that there is actually some gap in between two buttons. i want to get rid of this space. any ideas? if you do answer the question, please also explain why a certain property will fix this.
i know that it is tweakable using padding and margin, but the result is likely to get distorted upon zoom. please point out a stable way of solving the problem.
thanks
Look at this jsFiddle
I've updated display:inline-block; to display:block; on the menu links and added float:left to them.
When you use inline-block you will have this ugly inline gap between elements caused by the whitespace between the elements in your HTML markup..
Any whitespace between tags in HTML is collapsed into a single space character, which is why you have that gap.
You could:
Float your elements left,
Put the </a> and <a> next to each other in the source or
Use a font-size: 0 trick
In this case, personally I'd float all my <a>s left although removing whitespace from your source comes with the fewest caveats, the only one being that it's more difficult to read.
Get rid of the spaces themselves: this may look messy but actually it's the cleanest thing you can do. Anything you achieve with CSS tricks is just putting the spaces there and then denying their existence. Instead, you might want to omit them; the only problem to solve is readability.
So let's make it readable:
<div id="main">
<div id="menu">
<!--
-->Home<!--
-->About Us<!--
-->Pictures<!--
-->Contact Us<!--
-->
</div>
</div>
Again, I know it seems weird, yes, but think about it. The real weirdo here is HTML itself, not giving you a clear way to do this. Consider it a special markup! It could as well be part of the HTML standard; technically, btw, it is 100% standard, you are free to use comments...
here is your solution
http://jsfiddle.net/NPqSr/7/
.buttons
{
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left: 10px;
float:left;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
It's 2017: wrap them inside an element with display: inline-flex and flex the inner buttons with something like flex: 0 1 auto:
<div style="display: inline-flex">
<button style="flex: 0 1 auto">...</button>
Try this(JSFiddle)
CSS
#main {
height: 25em;
}
#menu {
background-color: #00b875;
height: 3em;
}
.buttons {
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left:5px;
padding-right:5px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.buttons:hover {
background-color: #0d96d6;
}
I think with latest CSS possibilities a cleaner solution is to use display:inline-flex on menu and display:flex on buttons, and maybe width:100% on menu:
http://jsfiddle.net/NPqSr/212/
Add the below style to your button. If required, make the margin negative for first of the few buttons.
button{
margin: 0px;
}
If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons.
I have a tool tip, and its basically not working. I did some searching, and the usual response is that you haven't added your position's, however I have those and im truly stumped.
The problem is that in the live demo below, the tool tip from the icons on the left, wont go on top of the content to the right, so I cant see it.
The code mainly lies here;
a.icon {
position: relative;
text-decoration: none;
}
a.icon .tooltip {
-webkit-transition: opacity 0.5s ease 0.2s, left 0.5s ease 0.2s;
-moz-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
-o-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
opacity: 0;
font-size: 11px;
color: #FFFFFF;
background:url('../images/tooltip.png') no-repeat bottom center;
position:absolute;
height: 40px;
line-height: 50px;
left: 100px;
text-align:center;
padding-left:10px;
width: 110px;
display: block;
top: 24px;
z-index: 1000;
}
a.icon:hover .tooltip {
opacity: 1.0;
top:24px;
}
And here is the HTML, with lorem removed;
<div id="icons">
<a href="info page" class="icon" id="info"><span class="tooltip">About Me</span>
<span class="tooltip">Portfolio</span>
<span class="tooltip">Mail</span>
<span class="tooltip">Skype</span>
<span class="tooltip">Twitter</span><!-- Holds the icons for the site -->
</div>
<div id="content">
raesent at quam velit,
</div>
There are span classes referring to tooltip, but this text box wont let me add them as code.
And in short, it doesn't work. I do have the example live here:
Sorry if its a pain to look through the code, im new to this, just starting my first portfolio, and I haven't organized or commented much yet.
Thanks very much.
.......................................
Hi now define your #content position and z-index
as like this
#content{
position:relative;
z-index:-1;
}
or 2nd option
#icons{
position: relative;
z-index: 2;
}
for opacity
write this css
#info:hover, #portfolio:hover, #email:hover, #skype:hover, #twitter:hover{
opacity:1;
}