I have a dropdown component which has a button on click on it it opens/closes the list box, i want to make the list to appears slowly with transition, i tried it but nothing works, what is wrong in my code?
<ul className={clsx("dropdown-options", isOpen && "show")}>
{options?.map((option: any, index: any) => {
return (
<li className={clsx("dropdown-option")}>
<span>{option.label}</span>
</li>
);
})}
</ul>
.dropdown-options {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
max-height: 15em;
overflow-y: auto;
overscroll-behavior: contain;
width: 100%;
left: 0;
top: calc(100% + 0.25em);
z-index: 100;
display: none;
transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
&.show {
display: block;
}
}
.dropdown-option {
padding: 0.25em 0.5em;
cursor: pointer;
position: relative;
transition: color 0.2s ease, background-color 0.2s ease,
padding-left 0.2s ease;
}
Related
I am creating a vertical dropdown menu with several sub menus that only shown whenever i click the corresponding
icon (which is angle down arrow) in the menu. after the sub-menu is shown the angle down arrow should be reverted to be angle up arrow that whenever clicked the sub-menu disappears again.
what i could do till now is that when i click the angle-down arrow for the first time the sub-menu slides but no reverted arrow or any functionality any more so i can not
hide the sub-menu again.
HTML: one sample menu item
<li class="menu">
<a href="#" tabindex=0>First</a>
<label for="close-1" ><i class="fa fa-angle-up"></i></label>
<input type="radio" id="close-1" name="toggle1" >
<label for="open-1"><i class="fa fa-angle-down" ></i></label>
<input type="radio" name="toggle1" id="open-1">
<ul class="sub-menu">
<li>Test</li>
<li>Test</li>
</ul>
</li>
CSS:
input[type="radio"] {
display: none;
}
.menu {
position: relative;
padding: 1em ;
font-weight: 700;
width: 100%;
border: 1px solid #eee;
border-right: none;
}
.sub-menu {
max-height: 0;
transition: max-height 0.4s ease-in-out;
overflow: hidden;
padding: 0.5em;
}
.menu label {
position: absolute;
right: 10px;
top: 20px;
transition: 0.4s ease-in-out;
}
input[type="radio"]:checked + .sub-menu{
max-height: 320px;
transition: max-height 0.4s ease-in-out;
}
I tried some thing like that but did not work
input[type="radio"]:checked label:nth-of-type(2) {
opacity: 0;
visibility: hidden;
}
input[type="radio"]:checked label:nth-of-type(1) {
opacity: 1;
visibility: visible;
}
My idea is to toggle the two arrows showing and i think my problem would be solved, but i have no idea to achieve that without js.
Added some animation and made it absolute by following your code: Fiddle
No animation: Fiddle
.menu {
position: relative;
padding: 1em;
font-weight: 700;
width: 100%;
border: 1px solid #eee;
border-right: none;
}
.sub-menu {
max-height: 0;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
overflow: hidden;
padding: 0, 0.5em, 0.5em;
}
.close {
opacity: 0;
}
.open {
opacity: 1;
z-index: 5;
}
#open-1:checked~.close {
opacity: 1;
}
input[type="radio"] {
display: none;
}
input[type="radio"]~label {
position: absolute;
right: 10px;
top: 20px;
transition: 0.4s ease-in-out;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
cursor: pointer;
}
#open-1:checked~.open {
opacity: 0;
z-index: 0;
}
#close-1:checked~.sub-menu {
max-height: 0px;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
}
#open-1:checked~.sub-menu {
max-height: 320px;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<li class="menu">
<a href="#" tabindex=0>First</a>
<input type="radio" id="open-1" name="toggle1">
<label class="open" for="open-1">
<i class="fa fa-angle-down"></i>
</label>
<input type="radio" id="close-1" name="toggle1">
<label class="close" for="close-1">
<i class="fa fa-angle-up"></i>
</label>
<ul class="sub-menu">
<li>Test</li>
<li>Test</li>
</ul>
</li>
I am trying to have a corner button display new content on hover using the following setup:
<div class="panel panel-default1">
<div class="panel-body">
<div class='amg-corner-button_wrap'>
<div class="overlay"></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
</div>
</div> <!-- wrap -->
</div> <!-- panel body -->
</div> <!-- panel default -->
CSS:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap .overlay {
border-bottom: 40px solid #e8c63d;
border-left: 40px solid transparent;
bottom: 0;
height: 0;
opacity: .95;
position: absolute;
right: 0;
text-indent: -9999px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
width: 0;
}
.amg-corner-button_wrap:hover .overlay {
border-bottom: 800px solid #e8c63d;
border-left: 800px solid transparent;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap .overlay-content {
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.amg-corner-button_wrap .overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover .overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Here is fiddle : https://jsfiddle.net/ar3jkuvq/
The hover deployment works well but the .overlay-content text does not show up if .amg-corner-button_wrap uses position: absolute. However I need it to keep the hover on the wrap only.
How can I keep the hover effect on the wrap only and show the text content at the same time?
You can use CSS3 transform property to scale the overlay instead of using a border, and then use a General sibbling combinator [w3] selector ~ to select the .overlay-content element that is preceded by a .amg-corner-button_wrap:hover.
Working fiddle
add this class in your css
.amg-corner-button_wrap{
width:100%;
height:100%;
}
I believe you can make use of the pointer-events attribute here.
Remove position: absolute; from .amg-corner-button_wrap
Add pointer-events: none; to .panel-default1
Add pointer-events: all; to .amg-corner-button_wrap .overlay
Working JSFiddle
I'm building an image overlay from right to left transition. The transition is working fine but the caption is 45% width of the image and I want the transition to stop at the end of caption width not continue till the end of image width.
This is my code
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
http://jsfiddle.net/vhp2nL7k/
The transition should be 45% of the image according to caption width
As you want the transition to stop the end of caption, the absolute position of the caption at that time would be left = 100-(width of caption div)% = 55% in this case.
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 55%;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
i have a code HTML CODE:
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2" tabindex="1">Sign in with
<ul class="dropdown">
<li><i class="icon-twitter icon-large"></i>Twitter</li>
<li><i class="icon-github icon-large"></i>Github</li>
<li><i class="icon-facebook icon-large"></i>Facebook</li>
</ul>
</div>
</div>
AND CSS:
.wrapper-dropdown-2 {
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
background: #fff;
border-left: 5px solid orange;
cursor: pointer;
text-align: left;
cursor: pointer;
outline: none;
}
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.dropdown {
display:none;
}
.wrapper-dropdown-2:hover ul.dropdown {
position: absolute;
display:block;
top: 100%;
left: -5px;
right: 0px;
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
http://jsfiddle.net/pvt3e/
and i try, in hover mouse to: Sign in with open the drop down but its not work !
i cant work with js. Because I have a problem with 1.8.2, but I think we can find a solution with CSS
try this
.wrapper-dropdown-2:hover ul{
display:block;
}
updated jsFiddle File
also remove .dropdown:hover from your style
You are missing to add hover code to see drop down when hover over. add css for hover.
.wrapper-dropdown-2:hover .dropdown
{
display:block;
}
Live Demo
Just Replace Your This CSS
.dropdown:hover {
/* Size & position */
position: absolute;
display:block;
top: 100%;
left: -5px;
right: 0px;
/* Styles */
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
To My CSS and Get Result
.wrapper-dropdown-2:hover > .dropdown {
position: absolute;
display:block;
left: -45px;
background: white;
top:24px;
}
You will need to initialize your javascript as well as link to jquery. I see you are using a dropdown from Codrops why dont you just download the source?
I'm trying to apply a hover state to some portfolio navigation. It's a horizontally and vertically centered header on top of an image. The centering works as I need it to (there are reasons for it being as complicated as it is, or believe me, I would do it some other way).
But the hover state is giving me problems. I'm trying to do something like this: http://jsfiddle.net/kmjRu/33/. Which is a transition of the h2 and its background on hover of the image. I can get it almost working by fiddling with opacity or the z-index of the h2, but especially the change of the background color is not working (because there are no elements exactly covering the image, of which I can change the background). Does anyone know how to get the hover state working properly?
This is the code I have and on which I'm trying to get this hover effect to work:
(Also posted here: http://jsfiddle.net/kmjRu/34/)
HTML
<article>
<div class="img-crop">
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</div>
</article>
CSS
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
article {
overflow: hidden;
}
.img-crop {
display: inline-block;
position: relative;
overflow: hidden;
max-width: 100%;
}
h2 {
margin: 0;
padding: 0;
z-index: 1;
line-height: 0;
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
}
h2 {
margin: 0;
padding: 0;
z-index: 1;
line-height: 0;
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
h2:hover {
opacity: 1;
}
This could be it!
Basically, you need to make sure following things.
your h2 should be exactly equal to the container behind, only then it will perform a total overlay.
set the default opacity of h2 to be 0. and change/transition it to some mid value say 0.6 upon hover.
now also, you need to make the background-color of the h2 black, or different than the parent container, only then it will appear.
and then give appropriate padding to the h2 element, to make the text appear in the middle.
set h2 like this:
h2 {
margin: 0;
z-index: 1;
padding-top:20%;
line-height: 0;
position: absolute;
top: 0%;
left: 0;
width: 100%;
text-align: center;
vertical-align:middle;
height:100%;
opacity:0;
}
and set your h2:hover like this:
h2:hover
{
padding-top:20%;
color:white;
background-color:Black;
opacity:0.6;
-webkit-transition: opacity 0.25s, background-color 0.25s;
-o-transition: opacity 0.25s, background-color 0.25s;
-moz-transition: opacity 0.25s, background-color 0.25s;
-ms-transition: opacity 0.25s, background-color 0.25s;
-kthtml-transition: opacity 0.25s, background-color 0.25s;
transition: opacity 0.25s, background-color 0.25s;
}
see this fiddle
So, I solved the question by doing it like this:
HTML
<article>
<div class="item">
<h2>Title</h2>
<img src="http://placehold.it/350x150" />
</div>
</article>
CSS
article {
overflow: hidden;
}
h2 {
font-weight: normal;
z-index: 2;
line-height: 0;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
left: 0;
margin: 0;
padding: 0;
color: rgba(255,255,255,0);
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.title {
display: inline-block;
position: absolute;
overflow: hidden;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
text-decoration: none;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.title:hover {
text-decoration: none;
}
.item {
display: inline-block;
position: relative;
max-width: 100%;
}
.item:hover .title {
background: rgba(0,0,0,0.6);
}
.item:hover h2 {
color: rgba(255,255,255,1);
}
img {
border: 0;
vertical-align: top;
max-width: 100%;
}
See this fiddle. That way it's dynamic (the image is fluid and there are no fixed heights or widths to it) and the headline is automatically centered vertically and horizontally.