Hello :) I have added a little underline animation to my bootstrap menu here: http://webserver-meetandengage-com.m11e.net so on hover, it draws the underline from the centre. Heres the CSS I used to achieve this:
/* ---------------------- Animated hover --------------------- */
.navbar-light .navbar-nav .nav-link {
position: relative;
text-decoration: none;
}
.navbar-light .navbar-nav .nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #FEB700;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar-light .navbar-nav .nav-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* ----------------------------------- */
As you will see, the last item in the list, Control Panel, I have added a padlock icon before it using the: li:last-of-type:before selector like so:
.navbar li:last-of-type:before {
font-family: FontAwesome;
content: "\F023";
float: left;
margin-top: 8px;
}
.navbar li:nth-last-child(2) {
margin-right: 15px;
}
Because of this icon, the underline animation is not centres to the button, and appears to stick out more on the right.
I can fix this by adjusting the width:; and the left:; but this of course effects all other underlines in the menu.
Im trying to combine the two I guess so I can target the last .nav-link item and apply a slightly different set of rules to the width:; and the left:; selectors... But I'm stuck and everything I have tried doesn't seem to be working.
Can anyone shed some light on the situation? is this correct or is there a better way to approach this? Thanks for reading!:)
You can add Font Awesome icons in HTML without the CSS magic like this:
<i class="fa fa-fw fa-lock"></i>
Some people use the <em> tag or something else, I like <i> more ...
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).
See Font Awesome documentation.
While messing around with the code I found that this
.navbar li:last-of-type a:before {
left: -6px;
}
edit
li#menu-item-750 a:before {
left: -6px;
}
Seemed to achieve a fix to your issue, as it's targeting the before on the last li entry, it should do the job
Related
I'm maybe 2 weeks into coding so apologies if I don't format correctly (code and question itself).I am trying to set a delay for the time it takes the buttons to switch text. Thank you for the help!
I've tried googling this and youtube with no luck.
I have tried adding
transition
transition-delay
body{
background-color: black;
}
.column{
position: fixed;
left:0;
bottom:0;
top:55px;
width:72px;
z-index: 200;
padding-top: 20px;
}
.about,
.skills {
font-size:72px;
width: 10em;
text-align: left;
border:none;
background-color: black;
color:red;
}
.about:hover span {
display: none;
}
.about:hover:after {
transition-delay: 3s;
content: "ABOUT";
}
.skills:hover span {
display: none
}
.skills:hover:after {
content: "SKILLS"
}
<h1>
<div class="column">
<button class="about" data-hover="ABOUT">
<span>
I
</span>
</button>
<button class="skills">
<span>
AM
</span>
</button>
</div>
</h1>
First of all, I would look into the html semantics a bit. Having div tags inside an h1 doesn't make much sense. So consider changing the h1 to a div. Also, the 3s delay is enormous. Think of something a bit faster, like 300ms.
The real issue is that display states and transition don't really work together since it swaps between states like block and none. But there are other solutions to this. You could use position: relative; on a parent div and give the children position: absolute. This way, you could make the transitions with opacity instead.
I have made an example for you so you can get the idea. I have commented on the CSS so you can follow up on what is happening.
/* Lets give our spans some styling: */
span{
font-size: 30px;
font-weight: 600;
font-family: sans-serif;
margin-bottom: 2rem;
max-width: 60ch;
}
/* Lets make the "container" position relative,
this way the absolute children will stay inside the container */
.hover-effect{
position: relative;
}
/* Let's give both of the children position absolute */
.hover-effect span{
position: absolute;
color: black;
opacity: 100%;
transition: 300ms ease-in 300ms; /* Delay: 300ms*/
}
/* Let’s override the previous.
This actually happens when we remove the hover, so we want to
trigger this animation first, hence the delay of 0ms*/
.hover-effect span.on-hover{
opacity: 0%;
transition: 300ms ease-in 0ms;
}
/* When we hover the container, let's change both spans */
.hover-effect:hover span{
color: red;
opacity: 0%;
transition-delay: 0ms;
}
/* Let’s override the previous.
When we hover on the container, the span with the class "on-hover"
becomes visible, and we wait 300ms before it happens so that the
"disappearing" animation gets its time to trigger. */
.hover-effect:hover span.on-hover{
opacity: 100%;
transition-delay: 300ms;
}
<div class="hover-effect">
<span>Try and hover over me</span>
<span class="on-hover">Try and remove the hover</span>
</div>
I have a Button Element that is styled with hover the way I would like it to look. However, it was suggested to me that I should use a link and style it to look like a button in order to preserve default browser button styling.
So that Ideally the button by itself does nothing, but clicking it activates its link.
I have tried to make it a link, then a link over the element, removing span, all while changing the CSS to suit <a> but the overall styling and hover go strange.
<button>Hover Me!</button>
Hover Me!
Could anybody please help shed some light on where I'm going wrong and how to make this button element a link while still looking like the button?
Thank you in advance for any suggestions.
This Is the button element.
Code Pen Link
Button Element
<button class="g2b-button" title=""><span>Hover me!</span></button>
CSS
.g2b-button {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #fff;
font-weight: 700;
font-size: 14px;
background-color: #A7784A;
padding: 17px 55px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}
.g2b-button span {
position: relative;
z-index: 1;
}
.g2b-button:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #31324E;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.g2b-button:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
Just change display: block under .g2b-button to display: inline-block. This is because anchor tags (<a>) are treated different by the browser than button tags (<button>).
In addition to the other answers. There is also an important syntax consideration. Buttons would be used for forms or accordions or card flips, opening or closing modals and other on-page dynamics, things which do not change to a different page. Links would always be used when taking a visitor to a new page. Your post vaguely suggests linking to another page so <button> would not be good syntax.
I am trying to move an HTML element up about 10px whenever a user hovers their mouse over it. I did some research on w3schools, but I could not find any information that helped me. Most of their animation examples were using keyframes and I'm pretty sure that's not what I need because I'm trying to trigger an animation when somebody hovers over the element. I could be wrong though and that's why I'm posting here.
Here's the element I'm trying to move:
<div id="arrow">
<i class="fa fa-arrow-down fa-2x"></i>
</div>
For my CSS:
#arrow {
padding-top: 310px;
color: #5C6B7E;
position: relative;
/* some kind of animation property here? */
}
#arrow:hover {
/* new properties once user hovers */
}
I'm not sure what I need to add to make the element animate up, the examples on w3schools weren't of much help. If anybody could point me in the right direction I would be extremely appreciative. Thank you Stack Overflow.
You need not use keyframes for this simple animation. Just CSS transition is enough.
Set the transition property in the initial state style rules with the duration.
Edit: I just noticed that there is a flicker at the bottom, it can be removed by setting the styles on the icon and hover on the parent.
#arrow i {
position: relative;
top: 0;
transition: top ease 0.5s;
}
#arrow:hover i {
top: -10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="arrow">
<i class="fa fa-arrow-down fa-2x"></i>
</div>
You could also try applying a negative margin-top on hover if your element is absolutely positioned:
div {
padding: 1em;
border: 1px solid #b5b5b5;
border-radius: 10px;
width: fit-content;
transition: 0.5s;
}
div:hover {
box-shadow: 0 0 3px black;
margin-top: -10px;
}
<br/>
<div>
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
</div>
I came across this while trying to solve an issue I had with getting an element to move when hovering over it with my mouse. None of the above worked, so I thought I'd share the solution I came up with on a test I ran:
.item {
background-color: black;
display: flex;
width: 100px;
height: 40px;
align-items: center;
justify-content: center;
text-align: center;
color: white;
transition: transform ease 300ms;
}
.item:hover {
transform: translate(0, -10px);
}
<div class="item">TEST</div>
I have a custom CSS button on my site, which rotates fine in Chrome, but Internet Explorer 11 is making it disappear when hovered over, instead of rotating.
You can see the button here (It's the blue "Search now!" button): LINK
When I remove this line from my index file, Chrome will then produce the same wrong effect as IE, so it makes me feel this is causing IE's issue.
<script src="http://taskbasket.net/gallery/themes/matheso/js/modernizr.custom.js"></script>
Can you offer a solution? Thank you.
Internet Explorer doesn't presently have support for preserve-3d, but the team is working to ship it in an upcoming release. That being said, simple examples like yours don't necessarily require this feature, and could be implemented in a more cross-browser manner.
I played a bit with replicating your effect by transitioning two pseudo elements independently:
<div id="button1">
<!-- Preserved your markup -->
</div>
a {
position: relative;
perspective: 500px;
}
a, a::before, a::after {
color: #FFF;
display: inline-block;
line-height: 44px;
box-sizing: border-box;
width: 155px; height: 44px;
backface-visibility: hidden;
text-decoration: none;
text-align: center;
}
a::before, a::after {
top: 0; left: 0;
position: absolute;
content: attr(data-text);
transition: transform 1s;
}
a::before {
background: #0965A0;
transform-origin: 50% 100%;
}
a::after {
background: #2195DE;
transform-origin: 50% 0%;
transform: translateY(100%) rotateX(-90deg);
}
a:hover::before {
transform: translateY(-100%) rotateX(90deg);
}
a::before, a:hover::after {
transform: translateY(0) rotateX(0);
}
Fiddle: http://jsfiddle.net/jonathansampson/ybjv8d7x/
Your effect needs preserve-3d to work.
And preserve-3d is not supported in IE, even though it is planned in the next version
By the way, it is a CSS related problem, javascript is working ok
Here is the site I'm working on: revistapuerto
It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.
The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:
#magia {
position: relative;
}
#magia img {
display: block;
}
#magia .cornerLink {
width:494px;
height:330px;
opacity: 0;
position: absolute;
top: 32px;
left: 0px;
right: 0px;
padding: 0px 0px;
background-color: rgba(0,0,0,0.50);
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#magia:hover .cornerLink {
opacity: 1.0;
}
Thanks!
Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/
HTML:
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
CSS:
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
(also the website won't load for me, could just be my work computer!)
that shows how to use hidden divs to make divs appear using a hover.
More information and I might be able to help you out :)
If I understood what you want, here's how you can achieve it.
#div-for-hover:hover #Div-you-want-to-show {
display: block;
}
The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show
Note: The hover could be on a headings, DIVs, images, and more.