I have seen some solutions but they actually affect the design intended.
Is there any way to stop this flicker without altering the design?
I understand that the problem is that While hovering over a moving (or animated) element, it may just un-hover from the element because it moves beneath my cursor.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #FFEE32;
}
.button {
box-shadow: -10px 10px;
background-color: #FFEE32;
border: 3px solid;
display: inline-block;
cursor: pointer;
color: #202020;
font-size: 30px;
font-weight: bold;
padding: 20px 30px;
transition: all 0.15s linear 0s;
text-decoration: none;
position: relative;
box-sizing: border-box;
}
.button:hover {
top: 3px;
transition: all 0.15s linear 0s;
left: -3px;
color: #FFEE32;
background-color: #202020;
border: #FFEE32;
box-shadow: 0px 0px 0 #ffe800 !important;
position: relative;
}
</style>
</head>
<body>
<h2>Animated Button - "Pressed Effect"</h2>
<div class="see">
<button class="button">Click Me</button>
</div>
</body>
</html>
check it out here, try to hover on edges from right and bottom
I would add an ::after pseudo element on your .button:hover, that will be slightly bigger than your actual button's area. As a result while you're hovering, the pseudo element will 'jump' under the cursor, that will prevent flickering - .button will not escape from your mouse :)
The below addition is not the perfect solution, but can be a working solution for your problem
.button:hover:after {
content: '';
position: absolute;
left: 0;
top: 0;
margin-left:10px;
margin-top:-10px;
height: 130%;
width: 110%;
/*border: 3px solid blue;*/
box-sizing: border-box;
padding:10px;
}
Please note, by uncommenting the border: 3px solid blue rule you'll see the actual position and size of the pseudo element on hover.
because of border size & top,left position button is "flickering" when hover on corner side.
Add "3px" in border & remove "top & left" position.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #FFEE32;
}
.button {
box-shadow: -10px 10px;
background-color: #FFEE32;
border: 3px solid;
display: inline-block;
cursor: pointer;
color: #202020;
font-size: 30px;
font-weight: bold;
padding: 20px 30px;
transition: all 0.15s linear 0s;
text-decoration: none;
position: relative;
box-sizing: border-box;
}
.button:hover {
top: 0px;
transition: all 0.15s linear 0s;
left: 0px;
color: #FFEE32;
background-color: #202020;
border:3px solid #FFEE32;
box-shadow: 0px 0px 0 #ffe800 !important;
position: relative;
}
</style>
</head>
<body>
<h2>Animated Button - "Pressed Effect"</h2>
<div class="see">
<button class="button">Click Me</button>
</div>
</body>
</html>
Related
I just want to add a border for the image with padding also I need transition effect. It's working fine but has a few problems :
it shows little movements in the image on hover(not fixed)
Transitions not smooth.
I tried everything.
I applied box-sizing:border-box; and gave the image a margin of 2px and removed it on hover but still no luck.
See this example. It's perfectly fine and the image is not moving on hover.
Here is my code :
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img {
border-radius: 50%;
margin: 2px;
transition: 0.2s ease-in-out;
}
.home-item1 img:hover {
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://i64.tinypic.com/2s0ftrc.png" alt="">
</div>
What am I missing? Please check the fiddle and let me know.
jsfiddle
This will work for you:
I have just added border: 4px solid transparent; and removed the margin and compensated it with the border and on hover reset it.
Fiddle
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border: 4px solid transparent;
border-radius: 50%;
padding: 0px;
transition:all 0.2s ease-in-out;
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://lorempixel.com/110/110/" alt="">
</div>
Hope this was helpfull.
First, You need to add transparent border to image so that it
will not move when hovered.
Second, Increase the duration of transition to get smooth effect
.home-item1 {
height: 107px;
width: 108px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border-radius: 50%;
margin: 2px;
transition: border 0.5s ease-in-out;
border: 2px solid transparent; /* Added */
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px; padding: 2px;
}
<div class="home-item1">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
adding a border will add to the dimensions of the div which causes the movement.. adding color to a transparent border will not, it achieves the same effect.
I think all you need to do is to boost the transition period and just add border to the image so that the border could be seen for a good time on hover, thus showing a watery like, a bit moving effect to the image. Here it goes :
.home-item1 {
height: 105px;
width: 105px;
cursor: pointer;
box-sizing: border-box;
}
.home-item1 img{
border-radius: 60%;
margin: 2px;
transition: border 0.6s ease-in-out;
border: 3px solid transparent;
}
.home-item1 img:hover{
border: 2px solid red;
margin: 0px;
padding: 2px;
}
<div class="home-item1">
<img src="http://lorempixel.com/150/150/" alt="">
</div>
I'm very new to CSS and HTML combination. I'm trying to make use of following code for dropdown menu. But when mouse is moved away from dropdown menu, it gets closed. I would like to close it onclick outside the dropdown menu. Can anyone suggest me a fix in CSS to achieve this? JSFiddle for me code is at following location Fiddle link. Your help will be much appreciated. HTML looks like this.
<div id="main">
<div class="wrapper">
<div class="content">
<content>
<div>
<ul>
<li>Lorem ipsum dolor</li>
<li>Consectetur adipisicing</li>
<li>Reprehenderit</li>
<li>Commodo consequat</li>
</ul>
</div>
</content>
</div>
<div class="parent">Drop Down Parent 1</div>
</div>
And CSS looks like this
#main {
margin: 30px 0 50px 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#main .wrapper {
display: inline-block;
width: 180px;
margin: 0 10px 0 0;
height: 20px;
position: relative;
}
#main .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
line-height: 30px;
height: 30px;
border-radius: 5px;
background: #F9F9F9;
border: 1px solid #AAA;
border-bottom: 1px solid #777;
color: #282D31;
font-weight: bold;
z-index: 2;
position: relative;
-webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
-webkit-transition-delay: .8s;
text-align: center;
}
#main .parent:hover, #main .content:hover ~ .parent {
background: #fff;
-webkit-transition-delay: 0s, 0s, 0s;
}
#main .content:hover ~ .parent {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
z-index: 2;
}
#main .content {
position: absolute;
top: 0;
display: active;
z-index: 2;
height: 0;
width: 180px;
padding-top: 30px;
-webkit-transition: height .5s ease;
-webkit-transition-delay: .4s;
border: 1px solid #777;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
#main .wrapper:active .content {
height: 123px;
z-index: 3;
-webkit-transition-delay: 0s;
}
#main .content div {
background: #fff;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#main .content:hover {
height: 123px;
z-index: 3;
-webkit-transition-delay: 0s;
}
I'm looking at something like this and will set new content to content tag. What I'm really looking at is following
1) Click on dropdown menu. Show the dropdown.
2) When hovered on it keep displaying. When hover outside dropdown keep showing it.
3) When clicked somewhere outside dropdown then close the dropdown.
I know I'm using hover selector so my behavior is like that. But I want to covert it to above behavior and I don't know how to do it.
<div id="main">
<div class="wrapper">
<div class="content">
<content>
</content>
</div>
<div class="parent">Drop Down Parent 1</div>
Your HTML is wrong. If you see, you have wrapped <li> inside the <a> tag. That's a basic issue you have. And there are other issues.
Change your existing HTML:
<a><li>...</li></a>
To the right form:
<li><a>...</a></li>
And then the click works. An <a> cannot contain an <li> inside it. So the click doesn't happen.
I am trying to have a div where on hover the image fades out (so you can only see the gray background behind) and some text fades in. I have been trying to do this using CSS transitions, however the opacity does not seem to change (i.e. I can still see the background image).
HTML:
<div id='options'>
<div class='option'>
<div class='back-option'>
</div>
<div class='front-option'>
Add post
</div>
</div>
</div>
CSS:
#options {
font-family: 'Segoe UI', 'Arial', sans-serif;
}
.option {
position: relative;
width: 6.25em;
height: 6.25em;
border-radius: 5px;
cursor: pointer;
background-color: #363636;
}
.back-option {
position: absolute;
width: 6.25em;
height: 6.25em;
border-radius: 5px;
background-image: url(http://png-5.findicons.com/files/icons/2672/pixel_ui/16/add.png);
background-size: contain;
-webkit-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
opacity: 1;
transition: opacity 0.5s;
}
.back-option:hover {
opacity: 0;
}
.front-option {
position: absolute;
width: 6.25em;
height: 6.25em;
border-radius: 5px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
line-height: 6.25em;
opacity: 0;
transition: opacity 0.5s;
}
.front-option:hover {
opacity: 1;
}
Here is a JSBin of it.
The hover isn't triggering because of the div placed over the top. I've simply modified the css to detect the hover on its parent instead.
.option:hover .back-option {
opacity: 0;
}
Live example: http://jsbin.com/cucadami/4/edit
.back-option doesn't get the event mouseover , cause another element is over it.
do
#options:hover .back-option {
opacity: 0;
}
and it will work.
you could as well give a background-color to .front-option, wich stands on top, and drop hover rules for .back-option
I have created a button with border-bottom of 4px. While hovering the button , I'm reducing the border-bottom-width as 0px and adding top of 4px to avoid affecting other elements below the button.
But the items below the button are moving while i'm hovering the button. Because, the blocks after the button are not considering the 4px top. So, It not looks good. How to overcome this problem..
.btn{
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
}
.btn:hover{
border-bottom-width: 0px;
top: 4px;
}
I have updated my code in jsFiddle
Thanks in advance..
Use this css:
.btn{
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: block;
float: left;
box-sizing: border-box;
transition: all 0.2s linear;
margin-right: 100%;
}
.btn:hover{
margin-top: 4px;
border-bottom-width: 0px;
}
Here is a working fiddle:
http://jsfiddle.net/Hive7/5mhGt/2/
If you want to keep the border color and keep the text from jittering while animating the :hover state, try wrapping your button(s) in a relatively positioned container.
Then, update your css:
.btn-wrapper {
position: relative;
height: 100px;
}
.btn{
position: absolute;
top: 8px;
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: inline-block;
transition: 0.2s;
}
.btn:hover{
top: 12px;
border: 0px;
}
jsfiddle: http://jsfiddle.net/BpL2A/
Updated fiddle: http://jsfiddle.net/5mhGt/5/.
The easiest way to resolve your problem is to make the border transparent:
.btn:hover {
border-bottom-color: transparent;
}
You don't have to mess with another properties like margin-bottom or so. If you decide to change the border width in the future you won't have to have this margin always in mind.
I am learning HTML 5 and CSS3 and am having trouble with my tabbed navigation bar. I thought the li:active css stlye would achieve my goal but that only is upon click and doesn't stay that way. I have looked at many tutorials across the web and cannot find out how to do this with just CSS and HTML. I would like to avoid using javascript or php if possible. I have found information in a few places on "child" elements and using the z-index properties, and think this may be a possible solution, but do not understand how to implement them. They look how I want on hover, but I want them to stay that style when I click them to give the effect of an active tab. Any advice or help is greatly appreciated.
My HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
Header
</header>
<nav>
<ul id="tabs">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</nav>
<article>
Article of Content
</article>
<aside align="right">
Aside of Content
</aside>
<footer>
<span id="cpyrt">© 2013 Footer Content</span>
</footer>
</body>
</html>
MY CSS:
body {
top: 0;
width: 80%;
position: fixed;
margin-left: 10%;
margin-right: 10%;
box-shadow: #000 0px 0px 900px;
height: 100%;
}
header {
background-color: #06F;
height: 8%;
padding: 9px;
padding-top: 25px;
box-shadow: inset #000 0px 1px 2px;
}
nav{
background-color: #333;
box-shadow: inset #000 -10px -15px 50px;
float:left;
width: inherit;
height: 59px;
}
/*--------------Navigation Tabs Styling ----- START -----------------------------*/
nav li{
list-style-type: none;
display: inline-table;
background-color: #666;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
text-align:center;
-webkit-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
-moz-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
-o-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s ease;
box-shadow: #000 0px 1px 10px;
color: white;
}
nav li:hover{
list-style-type: none;
display: inline-table;
background-color:#09F;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
color: black;
text-align:center;
box-shadow: inset #FFF 0px 1px 4px;
height: 30px;
margin-top: -3px;
}
nav li:active{
list-style-type: none;
display: inline-table;
background-color:#02F;
padding-top:15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:7px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border:none;
}
/*--------------Navigation Tabs Styling ----- END -----------------------------*/
article{
padding: 5px;
float: left;
background-color: #ddd;
height: inherit;
width: inherit;
box-shadow: inset #000 0px 1px 2px;
}
aside{
top: auto;
padding: 10px;
position: fixed;
right: 10%;
background-color: #CCC;
width: 17%;
height: inherit;
float: right;
box-shadow: inset #000 0px 1px 2px;
}
footer {
position: fixed;
bottom: 0;
background-color: #06F;
width: inherit;
height:8%;
padding-top: 5px;
box-shadow: inset #000 0px 1px 2px;
margin-right: 15px;
}
:active only applies to anchors (<a>) and buttons (<button>, <input type="button/>...) and only while they are pressed.
You need to take a look at :target
http://jsfiddle.net/coma/ED6cH/6/
HTML
<div class="tabbed">
<a href="#dog" id="dog">
Dog
<div>
<p>This is a dog...</p>
</div>
</a>
<a href="#cat" id="cat">
Cat
<div>
<p>This is a cat...</p>
</div>
</a>
<a href="#foo" id="foo">
Foo
<div>
<p>This is a foo...</p>
</div>
</a>
</div>
CSS
div.tabbed {
position: relative;
font-size: 0;
}
div.tabbed > a {
display: inline-block;
padding: .5em;
font-size: 16px;
border-radius: 3px 3px 0 0;
background-color: #333;
color: #eee;
text-decoration: none;
line-height: 1em;
}
div.tabbed > a + a {
margin-left: .5em;
}
div.tabbed > a:target {
color: #333;
background-color: #eee;
}
div.tabbed > a > div {
position: absolute;
top: 100%;
left: 0;
width: 300px;
padding: .5em;
border-radius: 0 3px 3px 3px;
display: none;
color: #333;
background-color: #eee;
}
div.tabbed > a:target > div {
display: block;
}
The :target pseudo selector matches what's in the URL hash (http://foo.com#this_is_the_hash) with the element having that hash string as id.
There is another hackish method using transition with very long time:
http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/
Insane:
http://dabblet.com/gist/2076449