I'm trying to get the transition ease to work on this, but can't. It's a bit trickier to know where to put the transition css when it's targeting something that shows something on hover.
The code is:
<div class="language-box">
<ul>
<li><a href="#" class="call-cs">English
<span class="cs">Coming Soon</span></a></li>
<li>Svenska</li>
</ul>
</div>
And css I'm trying is:
span.cs {
display: none;
}
a.call-cs:hover span.cs {
display: block;
position: absolute;
background: #4E4E4E;
color: #FFF;
padding: 2px 10px;
left: 31px;
top: -20px;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-webkit-transition: background 3s ease;
-moz-transition: background 3s ease;
-o-transition: background 3s ease;
transition: background 3s ease;
}
You can't use transition for display, but change size of your li and it's opacity to create cool transition:
CSS
span.cs {
opacity:0;
height:0;
}
a.call-cs:hover span.cs {
display: block;
height:18px;
position: absolute;
background: #4E4E4E;
color: #FFF;
padding: 2px 10px;
left: 31px;
top: -20px;
opacity:1;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
transition: all 0.5s ease;
}
li{
position:relative;
}
DEMO
Related
I have a very small container which has a custom dropdown element inside of it.
#main {
height: 90px;
width: 400px;
overflow-y: auto;
}
.wrapper-dropdown {
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
position: relative;
width: 200px;
padding: 12px 15px;
background: #fff;
border-radius: 6px;
border: 1px solid #d9e2f6;
cursor: pointer;
outline: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.wrapper-dropdown .dropdown {
position: absolute;
top: 100%;
left: -1px;
right: -1px;
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid #d9e2f6;
border-top: none;
border-bottom: none;
list-style: none;
padding: 0 5px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
max-height: 0;
overflow: hidden;
margin: 0;
z-index: 5;
}
.wrapper-dropdown .dropdown li {
padding: 0 10px;
width: 100%;
}
.wrapper-dropdown .dropdown li a {
display: block;
text-decoration: none;
color: #6a759e;
padding: 15px 0;
transition: all .3s ease-out;
border-bottom: 1px solid #d9e2f6;
margin-right: 20px;
}
.wrapper-dropdown.active .dropdown {
-webkit-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
-moz-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
max-height: 400px;
}
<div id="main">
CLICK OPTION 1 TO SHOW LIST
<div class="wrapper-dropdown">
<span class="selectedtext">Option1</span>
<ul class="dropdown">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
</div>
I'm trying to get the absolute positioned element (which is the list of options) to appear outside of the bounds of the main container which has overflow-y set.
I understand why this happening this due to this answer.
But am simply asking if anyone has any insights/tips/suggestions on a way to get around this or if it's generally not possible without moving the dropdown items outside of the container with the overflow set.
My example is here
When I hover over the corner of the element I am getting a weird constant hover and hover out effect, how can I fix this?
HTML
<h2>
HELLO
</h2>
CSS
h2 {
position: absolute;
background: rgba(2,35,64,0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
display: block;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2,35,64,0);
padding: 20px;
margin: 0px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
h2.woocommerce-loop-category__title:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
http://jsfiddle.net/xc7vjstn/1/
change the background from transparent to what ever color you want and you will see the content plus if you want to keep it online like small box then margin and padding is what you need to play with.
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: blue;
}
The margin in h2:hover is causing the behavior removing the margin fixed the problem
h2:hover {
border: solid 5px #FFF;
padding: 10px;
/*margin: 25px; */
background: transparent;
}
Here is my solution, please check the live example below:
h2 {
position: absolute;
background: rgba(2, 35, 64, 0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2, 35, 64, 0);
padding: 20px;
margin: 0 auto;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
background: transparent;
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
<h2>
HELLO
</h2>
is there a way to remove invisible space on top/bottom of a <a> tag.
I have tryed removing paddings, margins and other positions.
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><div class="cog"></div></button>
<div id="myDropdown" class="dropdown-content">
<div class="dop"></div>
Text
</div>
</div>
CSS:
.dropbtn {
height: 34px;
width: 34px;
background: #f0f0f0;
border-radius: 3px;
border: none;
cursor: pointer;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
vertical-align: none;
}
.dropbtn:hover, .dropbtn:focus {
background: #ebebeb;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
width: 140px;
border-radius: 3px;
left: -53px;
top: 48px;
}
.dropdown-content a {
color: #b7b7b7;
text-decoration: none;
font-family: OpenSans-Regular;
font-size: 12px;
text-align: center;
display: block;
outline-width: 0px;
}
.show {display:block;}
This is how it looks right now -
This is how it should look like -
Kinds regards, Ričards.
I think you are talking about the line-height property. Try using a low value :
line-height: .8em;
There is no extra padding or margin at the top and bottom of text.
This is normal behaviour of font specification:
Font-size is defined by 13, the white spaces are defined by 14 and probably 15 (since you don't have letters with parts below baseline).
You can override this by force line-height lower than font-size. But you must remember that every font has got different 14 in specification and you must choose ratio line-height/font-size (for example 0.8em) by experiment.
Change line-height to 10px or 12px as you find according to your needs
body {
background: #e0e0e0;
}
.dropbtn {
height: 34px;
width: 34px;
background: #f0f0f0;
border-radius: 3px;
border: none;
cursor: pointer;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
vertical-align: none;
}
.dropbtn:hover, .dropbtn:focus {
background: #ebebeb;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
}
.dropdown-content {
position: absolute;
background-color: #ffffff;
width: 140px;
border-radius: 3px;
left: -53px;
top: 48px;
}
.dropdown-content a {
color: #b7b7b7;
text-decoration: none;
font-family: OpenSans-Regular;
font-size: 12px;
text-align: center;
display: block;
outline-width: 0px;
line-height: 12px;
}
.show {display:block;}
<div class="dropdown">
<button class="dropbtn"><div class="cog"></div></button>
<div id="myDropdown" class="dropdown-content">
<div class="dop"></div>
Text
</div>
</div>
I am trying to do a image caption with slide. I have done everything, but the text inside the slide does not wrapped within the slide box. Someone please help in this.
use the JSfiddle link to view the code:
http://jsfiddle.net/anba/t31a4xq0/
HTML
</head>
<body>
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="https://pbs.twimg.com/profile_images/378800000247666963/9b177e5de625a8420dd839bb1561280d.jpeg" width="300" height="200"/>
<span class="caption simple-caption">
<div class="blogp">
Simple Caption
<p >1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
</div>
</span>
</div>
</body>
</html>
CSS
#mainwrapper {
/*font: 18pt normal Arial, sans-serif;*/
height: auto;
/*margin: 5px 10px ;*/
/*text-align: center;*/
width: 300px;
overflow: visible;
}
/* Image Box Style */
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 182px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 300px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
cursor: text;
}
/* Caption Common Style */
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.7);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 150px;
width: 300px;
display: block;
bottom: -70px;
cursor: text; /*line-height: 100pt;*/
text-align: left;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-40%);
opacity: 1;
transform: translateY(-40%);
}
.blogp{
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #FF8000;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:100%;
}
.blogp a{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14pt;
color: #0080C0;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:400px;
}
Look at the numbers i had used in the html. I have enter 1-50 but it displays only to 23 and the text is not getting wrapped to the next line.
Simply add to your css:
.blogp p{
word-wrap: break-word;
}
UPDATE of your : JSFiddle
Hi my problem is that I actually can't center my div!
it's always stuck on the left. I already tried the margin-left: auto; and margin-right: auto;, but it doen't seems to work.
Here's the HTML:
<ul class="menu">
<li>Acceuil</li>
<li>LoL
<ul>
<li><a><span class="headlist">League of Legends</a></li>
<li>Funny games</li>
<li>Favorite builds</li>
<li>...</li>
</ul>
</li>
<li>SSF2
<ul>
<li><a><span class="headlist">Super Smash Flash 2</a>
<li>Intro</li>
<li>Events</li>
<li>Challenges</li>
</ul>
</li>
<li>RotMG</li>
<li>GMod</li>
<li>Contact</li>
</ul>
<div>
<p>
HUEHUEHUEHUEHUEHUEHUE
</p>
</div>
And here's the css:
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* div */
div
{
text-align: center;
border-radius: 0 0 5px 5px;
width: 590px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(140,0,0,0.7);
margin-left: auto;
margin-right: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
color: #f3f3f3;
font-family: Helvetica, Arial, sans-serif;
display: block;
position: absolute;
top: 38px;
left: 25%;
z-index: -50;
margin-left: auto;
margin-right: auto;
}
/* Reset de la liste (aucun style, etc.) */
.menu,
.menu ul,
.menu li,
.menu a,
.menu p
{
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu
{
height: 40px;
width: 610px; /* Longueur du menu */
background: #760101; /* couleur du gradient */
background: -moz-linear-gradient(#D20202, #760101);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #760101),color-stop(1, #D20202));
background: -webkit-linear-gradient(#D20202, #760101);
background: -o-linear-gradient(#D20202, #760101);
background: -ms-linear-gradient(#D20202, #760101);
background: linear-gradient(#D20202, #760101);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 13px;
display: block;
margin-left: auto;
margin-right: auto;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 7px 0 40px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #4B0101;
border-right: 1px solid #5C0101;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #FF9900; }
/* Sub-menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #D20202;
background: -moz-linear-gradient(#760101, #D20202);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #D20202),color-stop(1, #760101));
background: -webkit-linear-gradient(#760101, #D20202);
background: -o-linear-gradient(#760101, #D20202);
background: -ms-linear-gradient(#760101, #D20202);
background: linear-gradient(#760101, #D20202);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 145px;
padding: 4px 0 4px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #4B0101;
}
.menu ul li:last-child a {
border: none;
}
.LoL
{
background: url(LoLicon.png) no-repeat 6px center;
}
.home
{
background: url(home.png) no-repeat 6px center;
}
.ssf2
{
background: url(SSF2.png) no-repeat 6px center;
}
.contact
{
background: url(contact.png) no-repeat 6px center;
}
.headlist
{
color:#ff9900;
}
.menu ul li:first-child a {
border-bottom: 3px solid #4B0101;
}
It's been 2 hours I'm searching so please help! :O
Margin: 0 auto; will not work with absolute positioning. Try removing position:absolute from the div and then it should work.
Here is the fiddle
If it must be absolutely positioned (thus meaning margin: auto won't work), then you can change the CSS to left: 50% and add margin-left: -295px;.
This will move the <div> 50% from the left, and then negatively bring it back by half of it's width, this leaving it in the middle.
http://jsbin.com/iJESEwe/1/edit?html,css,output