I've created a simple hamburger menu that transforms into a plus sign when the user hovers over it but there's an annoying flicker that occurs on hover. Is it possible to increase the hover region around the entire hamburger in CSS3 so that the flicker doesn't occur?
Here's the codepen link:
http://cdpn.io/LJHpe
As you likely know the flickering is due to the elements starting and stopping being hovered. There are several ways to fix this, the path I chose to do so is to make it one element instead of two (:
<span class="menu">MENU</span>
body {
background:#EDDE45;
position:relative;
margin-left:50%;
top:50px;
}
.menu {
position:relative;
top:50px;
padding-top:3em;
font-family: arial,verdana;
font-size:18px;
color:black;
cursor:default;
}
.menu:before { /* The top two lines */
content:'';
position: absolute;
left: -1em;
top: 0;
width: 5em;
height: .5em;
border-top:0.5em solid black;
border-bottom:0.5em solid black;
transition:transform 0.25s ease-in, border-bottom .2s;
}
.menu:after { /* The third line */
content:'';
position: absolute;
left:-1em;
top:2em;
width:5em;
height:0.5em;
background:black;
transition:all 0.25s ease-in;
}
.menu:hover {
cursor:pointer;
}
.menu:hover:before {
transform:scale(0.8);
border-bottom:0.5em solid rgba(255,255,255,0);
}
.menu:hover:after {
transform:scale(0.8) rotate(90deg);
top:0em;
}
Demo
Let me know if you have any questions!
Related
I am trying to use simple transiton, but I don't understand why it is not working. Could you help me? I put transition: ease-in-out; in container...
my code:
.container{
width:250px;
height:300px;
background:#00f;
position:relative;
transition: ease-in-out;
}
.show{
display: none;
position:absolute;
bottom:0;
height:50%;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
}
.container:hover > .show{
display:block;
}
http://jsfiddle.net/mAzsL/44/
I use this as example: http://jsfiddle.net/n7Ne9/53/
UPDATE:
My aim was to get effect which is called 'fade in a box' - I wasn't precise, sorry.
Update:
On new requirements, the transition effect needs to be different, please refer the below snippet.
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
opacity:0;
height:30%;
bottom:0px;
left:0px;
right:0px;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: opacity 0.5s ease-in-out;
}
.container:hover>.show {
opacity:1;
}
<div class="container">
<div class="show">Lorem </div>
</div>
Old Answer:
The problem is transition property cannot be applied to the CSS property display:none, the workaround for this is to set the height to 0px initially, a problem you will face is that the text will still be visible on the screen. For this overflowing text to be hidden, use the CSS class overflow:hidden which will hide the content which is outside the element. Also instead of using transition on the parent element, use it directly on the element itself. Refer the below class.
.show{
position:absolute;
overflow:hidden;
bottom:0;
height:0px;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
transition: height 1s ease-in-out;
}
The transition property should be as follows.
transition: height 1s ease-in-out;
First mention which property should have the transition effect. Then duration of the transition, then whether ease-in or some other setting.
Then on hover, set the original height. The transition will be seen.
.container:hover > .show{
height:50%;
}
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
overflow: hidden;
bottom: 0;
height: 0px;
width: 100%;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: height 1s ease-in-out;
}
.container:hover>.show {
height: 50%;
}
<div class="container">
<div class="show">Lorem </div>
</div>
I want to create a border animation. If i hover over the link, the border-bottom should extend from the left side to the right side. I searched alot,
but i dont know how to name it.
Here is my Code:
.a{
width: 200px;
display: inline-block;
transition: 0.5s all;
}
.a:hover{
border-bottom: 5px solid #037CA9;
}
<a>Benutzername:</a>
How must i design this elemt, that a border-bottom extend from the left to the right side?
You could use a positioned pseudo-element
a {
text-decoration: none;
position: relative;
}
a::before {
content: '';
position: absolute;
background: red;
height: 2px;
top: 100%;
left: 0;
width: 0%;
transition: width 0.5s ease;
}
a:hover::before {
width: 100%;
}
Benutzername:
You can use a pseudo element scaled to 0.001 and scale it back to 1 on hover. This approach is dercibed in an other question: Expand border from center on hover
To make it expand form the left, you just need to change the transform origin to 0 0 :
a{
display:inline-block;
}
a:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform-origin:0 0;
transform: scaleX(0.001);
transition: transform 250ms ease-in-out;
}
a:hover:after {
transform: scaleX(1);
}
<a>Benutzername:</a>
I think that you're trying to get something like this fiddle below.
I made a little example with an styled <a> tag and used the pseudo <a> element and gave it a transition to make it extend when you hover it.
a {
position:relative;
display:inline-block;
padding:5px 10px;
color:#444;
background:#f3f3f3;
text-decoration:none;
}
a:after {
content:'';
position:absolute;
background:green;
display:block;
height:2px;
bottom:-2px;
left:0;
min-width:0;
transition:all .2s linear;
-webkit-transition:all .2s linear;
}
a:hover:after {
min-width:100%;
}
Hover button
maybe add some more browser specific css transitions to be more multi browser compatible. For more info on that take a look HERE
jsFIDDLE
If someone wants to extend the line from center there is solution:
a {
position: relative;
text-decoration: none;
}
a:after {
content: '';
background: #2a57b3;
display: block;
height: 2px;
position: absolute;
left: 50%;
bottom: 0;
width: 0;
-webkit-transition: all .2s;
transition: all .2s;
}
a:hover:after {
width: 100%;
margin-left: -50%;
}
<a>Hover me!</a>
You could try this.
#divname {
position:absolute;
top:0;
height:500px;
}
#divname:hover {
position:absolute;
top:0;
height:600px;
}
This worked for me.
I am creating a Pure CSS3 Modal.
Along the way I got two issues.
The Background is not changing to transparent black color when the modal was click.
(if you've seen modal before you know what I mean cause basically it will force the background to be transparent type color.) See Screenshots:
!The original background color is #fff or white
Look at the background its color grayish tranparent color when the the modal was active
I've been thinking how can I make this 3D Flip Horizontal Animate or create a nice and smooth rotation when coming instead of just plain moving from top to bottom.
Here's my HTML:
<p>Display Modal</p>
</div>
<div id="modal">
<div class="modal-content">
<h1>What is a modal?</h1>
<div class="copy">
<p>A modal window is any type of window that is a child (secondary window) to a parent window and usurps the parent's control. It is commonly associated with an Internet Web site pop-up window that stays in front of the original window. A user may not press any controls or enter any information on the parent window (the original window which opened the modal) until the modal has been closed.</p>
</div>
Close Modal
<div class="overlay"></div>
</div>
</div>
Here's my stylesheet codes:
.container {
width:50%;
margin:90px auto
}
#modal {
background:#97d2f1;
left:50%;
top:-50%;
width:80%;
padding: 20px;
margin:-250px 0 0 -40%;
position:absolute;
color: #fff;
visibility: hidden;
box-shadow:0 3px 7px rgba(0,0,0,.25);
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target {
opacity: 1;
top:50%;
visibility: visible;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 10;
}
.btn {
padding:0 3em;
outline:none;
border:none;
color:#fff;
text-transform:uppercase;
font-weight:700;
letter-spacing:1px;
font-size:1em;
line-height:4;
overflow:hidden;
border-radius:5px;
background:rgba(0,0,0,0.2);
text-align:center;
cursor:pointer;
margin:20px auto;
display:block;
width: 30%;
margin-top: 40px;
}
Here's my JS FIDDLE: http://jsfiddle.net/agx4w5pm/1/
If you could edit my JSFIDDLE code that would be a great help.
Thanks in advance for the help!
Didn't understand your first point. But added rotation effect to your modal like you asked in second point. replace following classes
#modal {
background:#97d2f1;
left:50%;
top:-50%;
width:80%;
padding: 20px;
margin:-250px 0 0 -40%;
position:absolute;
color: #fff;
top: 50%;
box-shadow:0 3px 7px rgba(0,0,0,.25);
transition: all 1s ;
-moz-transition: all 1s ;
-webkit-transition: all 1s ;
-webkit-transform: rotateX(270deg);
-webkit-transform-origin: 50% 50%;
-webkit-perspective: 1500px;
}
#modal:target {
opacity: 1;
top:50%;
-webkit-transform: rotateX(0deg);
}
Notice -webkit-transform: rotateX(270deg); property which is giving rotation effect.
What I'm trying to achieve is a fake loading message as the user hovers over the div before it shows the actual div content.
.info { opacity: 0; width: 200px; height: 300px;transition-duration: 0.3s; transition-delay: 2s; margin-top: -20px; background-color: #000;}
.info:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 2s; }
.access {opacity: 0.0; transition-duration: 0.3s; transition-delay: 0.5s; background-color: #000; color: #fff}
.access:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 0.5s; }
http://jsfiddle.net/499hM/
As you can see, the message appears and then the div but the message reappears over the top of the div and fades it out - I want the message to disappear once the div has "loaded". I'm hoping this can be achieved through CSS alone?
you canuse the adjacent selector and set 2 transitions on 2 different child of your boxe.
the .loading message first in flow, once hovered shows up and the next child (+ .infos) will show up on top of it a little while after. from there, the .infos takes over the :hover to keep on top.
DEMO:
http://codepen.io/gc-nomade/pen/jilLp
<div>
<p class="loading">
loading ...
</p>
<p class="infos">
Infos
</p>
</div>
div {
border:solid;
width:200px;
height:200px;
border:gray solid 5px;
margin:auto;
text-align:center;
position:relative;
}
.loading , .infos{
position:absolute;
top:0;
left:0;
margin:0;
height:100%;
width:100%;
line-height:200px;
background:black;
color:white;
z-index:5;
opacity:0;
}
.infos {
z-index:0;
background:yellow;
line-height:1.2em;;
color:red;
}
.loading:hover {
opacity:1;
}
.loading:hover + .infos, .infos:hover {
opacity:1;
transition:2s 1s;
z-index:10;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I'm trying to get a background image to rotate when I hover over it. But at the same time I want some link text over top of the picture to NOT rotate.
I have it semi working, but when the image rotates the text get's hidden behind it. and sometimes you will hover over the link, and the image doesn't rotate. Is there a way to accomplish this?
JS Fiddle: http://bit.ly/1b9bpiJ
Dev Site: http://briggs.honeycombsites.com/
A slight modification to the excellent answer of Zeaklous.
To avoid the counter-rotation of the text, do not rotate the base div. Place the background in a pseudo element and rotate this.
div.button {
width:130px;
height:130px;
position:relative;
float: left;
margin-right: 20px;
overflow:hidden;
}
div.button:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url('http://briggs.honeycombsites.com//wp-content/themes/briggs/images/btn_contact.png');
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
z-index: -1;
}
.button:hover:after {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
div.button a {
color: #CFCAB4;
font-size: 24px;
line-height: 26px;
text-align: center;
text-shadow: 1px 1px 1px #333333;
width: 100%; height:80%;
text-transform: uppercase;
position:absolute;
top:50%; margin-top:-40%;
left:50%; margin-left:-50%;
}
div.button:hover a {
color: #fff;
}
div.button a span {
border-bottom: 1px solid #CFCAB4;
display: inline-block;
font-size: 12px;
line-height: normal;
margin-bottom: 7px;
text-shadow: none;
}
updated demo
In the above answer, I forgot the unprefied transform in the after
.button:hover:after {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
Also, for some reason, the design breaks in firefox and IE; the font of the span needs to be set a little bit higher:
edited demo
I understand why you set up your code this way, but transform has some interesting unintentional effects at times. In your case it's affecting the z-index somehow and I'm not sure exactly how to fix it
With that being said, here's how I'd do it, which is simpler to me. It involves putting the text inside the rotating element, but rotating the text in the opposite direction at the same time in order to keep it upright
/* Updated HTML */
<div class="button">
<span>Contact Us</span>1.800 444.1515
</div>
/* CSS */
div.button {
width:130px;
height:130px;
position:relative;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
float: left;
margin-right: 20px;
overflow:hidden;
background: url('wp-content/themes/briggs/images/btn_contact.png');
}
div.button:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
div.button a {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
color: #CFCAB4;
font-size: 24px;
line-height: 26px;
text-align: center;
text-shadow: 1px 1px 1px #333333;
width: 100%; height:80%;
text-transform: uppercase;
position:absolute;
top:50%; margin-top:-40%;
left:50%; margin-left:-50%;
}
div.button:hover a {
color: #fff;
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
}
div.button a span {
border-bottom: 1px solid #CFCAB4;
display: inline-block;
font-size: 12px;
line-height: normal;
margin-bottom: 7px;
text-shadow: none;
}
Demo here
Let me know if you have any questions about my method