I am trying to make the bootstrap menu dropdown transition its opacity, Im very close but its just not working quite right I have looked a lots of examples and this is what i have come up with:http://jsfiddle.net/StudentRik/o642hw2e/
I would like the dropdown to appear when I hover over the a tag, it appears when you are at the bottom of the a tag due to the position How could I make this work?
Give it a try.
li.dropdown > .dropdown-menu{
display: block;
position: absolute;
top: 17px;
left: 0;
}
li.dropdown > .dropdown-menu{
opacity: 0;
transition: opacity .5s ease-in-out;
}
li.dropdown:hover > .dropdown-menu{
opacity: 1;
}
Related
Since display: block does not work with transition, i just found some solutions here like using both opacity and visibility and animating opacity from 0 to 1, but this way takes up the space under the menu.
This is the code:
.menu {
position: relative;
display: inline-block;
}
.sub-menu {
position: absolute;
visibility: none;
opacity: 0;
}
.menu:hover .sub-menu {
visibility: visible;
opacity: 1;
transition: opacity 0.4s linear;
}
How to modify this code to save up the space under the menu while no submenu is active???
I would prefer one with display:block; if possible!!
You were actually almost there. visibility: none should be visibility: hidden. This makes the element unclickable and unhoverable... until you hover over the parent .menu element.
Demo:
.menu {
position: relative;
display: inline-block;
background: powderblue; /* colors for clarity */
}
.menu .sub-menu {
position: absolute;
visibility: hidden;
opacity: 0;
background: lightskyblue;
transition: opacity 0.5s linear; /* good practice to put this here */
}
.menu:hover .sub-menu {
visibility: visible;
opacity: 1;
}
<div class="menu">
<div>Hover Over Me</div>
<div class="sub-menu">
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</div>
<p>Some content that isn't supposed to move</p>
As a further note on your intro, you cannot animate display:block, but you absolutely could switch the property value for the :hover pseudo-class:
.sub-menu {
opacity: 0;
display: none;
}
.menu:hover .sub-menu {
display: block;
opacity: 1;
}
However... your transition fade-in won't work anymore if you do that. Switching visibility is a better choice when you want to use a transition.
Either way won't insert any space beneath the menu (your code was already accomplishing that with position:absolute).
Update:
Since your comment said you need to use display: none on the hidden menu, you can use the display switch and change opacity with an animation property instead of transition.
.menu .sub-menu {
position: absolute;
display: none;
opacity: 0;
}
.menu:hover .sub-menu {
display: block;
animation: reveal 0.4s linear;
opacity: 1;
/* be sure declare the final opacity like this, or else it'll revert to 0 after the animation completes */
}
#keyframes reveal {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
You can drop the visibility property entirely, since it's not doing anything here.
What about using transform to have it slide in from the top? This way it never covers your content.
.menu {
position: relative;
z-index:666;
}
.main-menu{
/* just some styles so you cannot see the dropdown transition behind it */
padding:1.5em;
text-align:center;
background-color:blue;
color:white;
}
.sub-menu {
position: absolute;
top:6em; /* the height of the main-menu */
left:0; right:0;
z-index:-1;
transition:all 300ms ease-in-out;
transform:translateY(-300%);
/* aesthetic styles */
background-color:red;
color:white;
padding:1.5em;
text-align:center;
}
.main-menu:hover + .sub-menu {
transform:translateY(0%);
}
<div class="menu">
<div class="main-menu">
<p>Hover Me</p>
</div><!-- main menu -->
<div class="sub-menu">
<p>Submenu</p>
</div><!-- sub-menu-->
</div><!-- menu -->
I've been racking my head over this seemingly little thing for a while but I'm at my wits end. I'm running a free Customizr theme on my site.
What I am trying to achieve is to have the hover effect in the navigation bar like this demo here. As you can see, only the text of the dropdown menu items are nicely underlined.
I've found and tried to use this CSS code here:
.sliding-middle a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle a:hover:after {
width: 100%;
background: #08c;
}
However, the result I got as you can see here, the dropdown menu items are underlined all the way across. I found that if I didn't target the "a" tags, the line would appear even more weirdly on the main menu items. But by doing so, the whole submenus inherit this effect.
If anyone has any idea what I'm missing, please help me out. Thank you in advance!
The example you want to achieve uses two span-nodes inside the a and only targets the first one (adding a pseudo :before) with this CSS
.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before {
background-color: #313131;
visibility: visible;
-webkit-transform: translate3d(0,0,0) scaleX(1);
-moz-transform: translate3d(0,0,0) scaleX(1);
transform: translate3d(0,0,0) scaleX(1);
}
If you add a span for the link text, you should get pretty much the same result.
Alright! After a few days of stressing it out and breaking my site, I've finally sort-of solved this issue.
Firstly, as #janh2 mentioned, you need to get the page to add span tags to the navigation menu labels. I've asked a different question and have updated it with the answer.
Next it's simply using the following to get the result:
.sliding-middle span {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle span:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle span:hover:after {
width: 100%;
background: black; /*colour you want your line to be*/
I hope this helps guys.
I'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
The solution is probably really simple but ahhh I just can't get it. I have a div with text in it which I placed right at the same location of an image. What is supposed to happen, and it does, is the image is supposed to fade out allowing the text to be more visible. The only thing is though, that I want the text to be hidden, and made visible only when the user hovers over the image/div text box. I tried a few things like
.display {
visibility: hidden;
}
img.artwork:hover + .display {
visibility: visible;
}
but that doesn't work because it just starts glitching. I can't use z-index either because neither the image nor the div text are in position: absolute or position: relative. Any ideas on how to fix this? This is what I have right now:
img.albumartwork:hover{
opacity: .15;
-webkit-transition: all 0.4s ease 0s;
}
.display {
font-size: 12px;
font-weight: bold;
width: 120px;
height: 120px;
color: rgb(220,221,229);
text-align: center;
margin-top: -120px;
margin-left: 52.5px;
background-color: rgba(0,0,0,0.6);
}
try to target color property on your :hover
SAMPLE
div {
color: transparent;
transition: 0.5s all ease ;
}
div:hover {
color: black;
}
div:hover img {
opacity: 0;
}
img {
width: 150px;
transition: 0.5s all ease ;
position: absolute;
left: 0;
}
Im trying to pause the display of a child element when it's parent is hovered over.
Html:
<span>
<div>This Is The Child</div>
Some Text in the span
</span>
Css:
span {
position: relative;
}
span div {
display: none;
width: 0px;
opacity: 0;
transition: width 5s;
-webkit-transition: width 5s;
transition: opacity 5s;
-webkit-transition: opacity 5s;
}
span:hover div {
display: inline-block;
width: 150px;
opacity: 1;
}
As of right now, when the span is hovered, the div has no delay before it is shown. How would I go about fixing it so there is a pause?
Fiddle here: http://jsfiddle.net/SReject/vmvdK/
A few notes:
I originally tried to transition the display, but as Edward pointed out, that isn't possible, and have sense tried the above which, also, isn't working
SOLVED
It would appear that any "display" property in the "transition to" styling will stop any transition animations from happening. To work around this. I set the width of the child to be displayed to 0px and have it be completely transparent. Then in the "transition to" styling, I set the correct width, and make the div solid:
Html:
<span>
<div>This Is The Child</div>
Some Text in the span
</span>
Css:
span {
position: relative;
}
span div {
position: absolute;
width: 0px;
opacity: 0;
transition: opacity 5s;
-webkit-transition: opacity 5s;
}
span:hover div {
width: 150px;
opacity: 1;
}
Fiddle here: http://jsfiddle.net/SReject/vmvdK/
According to this article on CSS transitions, which is referenced by the MDN page on CSS transitions, the display property is not one that can be transitioned:
There are several properties or values you’ll want to transition, but which are both unspecced and unsupported at the time of writing:
background-image, including gradients
...
display between none and anything else
So applying the transition: display 5s; property to your div has no effect.
EDIT:
Based on your updated code, you can achieve the effect you want with opacity and width as long as you don't specify the display property. Simply remove the line
display: none;
from the span div section, and the pop-up menu will use the transitions you specified when you hover over it.
Since the transition from display:none; to display:inline-block can't be animated, this property is probably changed only at the end of the transition - so the opacity animates while the div is still invisible.
Have you tried using -webkit-transition-delay: ;? If not, this might be something you are looking for?
Did some changes in the code:
span div {
position: absolute;
left: 5px;
top: 5px;
border: 1px solid #000;
background-color: #888;
width: 0px;
opacity: 0;
cursor: pointer;
}
span:hover div {
display: inline-block;
-webkit-transition-delay: 2s;
width: 150px;
opacity: 1;
}
And here's a demo