I'm having issues getting my image to transition when hovered over, I believe the issue is with the css .play_button a:hover
when changed to #play_button a:hover it will transition however -webkit-transition no longer works.
Here's my current code: http://jsbin.com/vesuravabu/edit?html,css,output
Thanks for your help.
edit: added the transition to the example that I was trying to use.
This question is now answered, thank you everyone who replied.
I changed it from ".play_button a:hover" to "#play_button a:hover"
I also found the issue with my transition, accidentally used a semi-colon after -webkit-transition
Problem:
You don't have any class which is called play_button(.play_button). You can change .play_button to #play_button to solve your problem.
Jsbin
#play_button a {
background: url(http://placehold.it/119x69) repeat-y;
background-size: 100%;
padding: 0 36px;
width: 119px;
height: 69px;
display: block;
cursor: pointer;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#play_button a:hover {
background: url(http://placehold.it/200x150);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="sidebar_item">
<div id="play_button">
</div>
</div>
</body>
</html>
You definitely need to be using #play_button a:hover as opposed to .play_button a:hover, because play_button is an id, not a class name.
I don't see any -webkit-transition statements in your example, how are you trying to use this? It's not possible to transition, using CSS transitions, from one image to another in this manner. However, you could accomplish this a slightly different way: have a second DOM element overlaid on top of the first, set to opacity: 0 with the hover image already applied to this top element. Then, transition the opacity to 1 when hovering. This may give the effect you're looking for.
EDIT: Now that you've added a transition, we can fix that too. Note that in your example, "webkit" is misspelled, but the main problem is that you didn't specify the new width and height to transition to. Give this a try:
#play_button a
{
background: url(http://placehold.it/119x69) repeat-y;
background-size: 100%;
padding: 0 36px;
width: 119px;
height: 69px;
display: block;
cursor: pointer;
transition: 0.2s; /* Don't need webkit prefix here for modern browsers */
box-sizing: border-box; /* Tell browser: Don't include padding in size calculations */
}
#play_button a:hover
{
background: url(http://placehold.it/200x150); /* This will snap, not transition */
width: 200px; /* New width & height, will be used for transition */
height: 150px;
}
Related
I've noticed an unanticipated effect of using CSS color transitions on an image with a transparent background. Here's an example:
:root {
--size: 4em;
--duration: 5s;
}
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu *:hover {
background: skyblue;
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image-div {
float: right;
padding: calc(var(--size) / 2);
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image {
max-width: var(--size);
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
To summarize, the issue is this. If you hover over the image-div div's padding, the background color of this div and the contained image div execute the color transition at the same rate, as expected. However, if you hover over the image div, its color appears to transition slightly faster than the image-div div's color.
Given the fact that I was able to reproduce this exact behavior on Firefox, Chrome, Safari and Edge, I get the feeling that this is expected behavior, but I would like to understand why it is happening.
When you hover over the img two hover events are triggered - one on the img and one on its parent image-div when you use * in .main-menu *:hover selector:
Instead use the hover only on the image-div as below:
.main-menu .image-div:hover {
background: skyblue;
}
and now the difference in transition will not be there - see demo below:
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu .image-div:hover {
background: skyblue;
}
.image-div {
float: right;
padding: calc(4em / 2);
-webkit-transition-duration: 5s;
transition-duration: 5s;
}
.image {
max-width: 4em;
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
Given the fact that I was able to reproduce this exact behavior on
Firefox, Chrome, Safari and Edge, I get the feeling that this is
expected behavior, but I would like to understand why it is happening.
The reason this happens is because the img transition picks up the image-div transitioned color, hence get lighter faster.
Simply put, the image-div goes from a solid black, while the img goes from black that turns into sky blue.
Additionally, since you move the mouse over the image-div before it gets to the img, the transition starts before, though the delay is based on how fast you move the mouse to the img
I'm experiencing an issue with the css transitions firing on page load. Basically there were a problem with fancy links with custom background dropping from the top(start position) on the page load.
You can see example here.
These problems only occur if there is both input and a tags on the page so if we remove input everything will be just fine. The other way to solve this problem is not to use an external css file: it works fine with jsbin, but it isn't really helps because I want to understand why this things could ever be happening.
I have the following code:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="signin.css">
<title>Dobrotech</title>
</head>
<body>
<input type="password" name="password" required=""/>
forgot password?
</body>
CSS:
a{
padding: 0 0 5px 0;
background: url(/dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}
a:hover {
background: url(/dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}
a {
transition: background-size 0.5s ease-in, background 0.5s ease-in;
}
a:hover {
transition: background-size 0.1s linear, background 0.1s linear;
}
UPDATE: I've decided to remake this link effect using ::before pseudoclass and the problem is gone but I still want to figure out what cause links and inputs interact that weirdely
try this
a{
padding: 0 0 5px 0;
background: url(dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}
a:hover {
background: url(dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}
i remove first / from background url
download my sample
I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.
Background: I originally copied this idea from here: original form.
Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).
Now here's my demo:
My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).
So the code that's relevant to this problem is as follows.
The HTML code:
<button class="login-button"><span>SEND</span></button>
The CSS code:
.login-button{
width: 100%;
outline: none;
border:none;
cursor: pointer;
padding: 0;
margin:0;
transition:.3s;
}
.login-input , .login-button{
height: 50px;
line-height: 40px;
transition:.3s;
}
.login-button span{
display: block;
background:red;
height: 100%;
width: 100%;
left: 0;
transition:.3s;
position: relative;
}
.login-button span:before{
content: 'ok';
position: absolute;
left: 100%;
display: block;
}
.login-button:hover span:before{
content: 'OK To go now';
position: absolute;
/*left: 0%;*/
text-align: center;
display: block;
width: 100%;
height: 100%;
}
Now if I go to the CSS styling for the main container:
I.E.
.main-login{
min-width: 200px;
max-width: 400px;
background: #533e69;
margin: 100px auto;
text-align: center;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0,0,0,.2);
padding: 0 20px;
}
and take off the padding, then the problem is solved and the transition looks perfect.
The problem
My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.
Proposed solution
I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.
I am new to CSS, so my solution may be less elegant:
When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.
You need to set the background to be transparent. It's not possible for a transition to animate the display property.
Add this css code, and it should work:
.login-button:hover span{
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
transition: 2s;
background: rgba(1,1,1,0);
}
See your updated fiddle here.
Edit: I cleaned up the css a bit:
.login-button:hover span{
transition: 0.3s;
background: transparent;
}
Fiddle is here.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
-webkit-transition: color .2s, text-shadow .2s;
/* And so on... */
}
Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;
Or try this
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
This is the link
Update I implemented the CSS Reset and to no avail. The answer by Kejko also did not help and instead made it worse. (Chrome now displays it incorrect with the change in styles)
This may be the problem since I know actual tables can not be positioned relative?
.chatIcons {
display: table;
}
End Update
I was about to have my site go live after I tested how each page looked on the major browsers and ran into a problem. The problem seems to be involved with the hover effect of the icons.
In chrome the icon section appears exactly how I want it to.
In FireFox it appears the same but once one it is hovered it only effects the third icon and the .iconInfo's overlay from staying relative to the parent, instead it is doing 100% width and height of the main parent container.
In IE 10-11 it keeps everything correct but once it is hovered the "overlay" is not 100% height anymore and the height actually varies.
Here is the css pertaining to the hover:
.iconInfo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
opacity: 0;
transition: opacity 0.6s ease;
-webkit-transition: opacity 0.6s ease;
-moz-transition: opacity 0.6s ease;
}
.icon:hover .iconInfo {
opacity: 1;
}
I have included a fiddle to help, Demo
Try this:
.icon {
border-radius: 5px;
display: inline-block;
padding: 15px 0;
position: relative;
vertical-align: middle;
width: 32.99%;
}
That should fix your problem.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I wish to do something similar to this,
http://timheuer.com/blog/archives.aspx
i need to create a interactive circular links using CSS.
There are a number of ways you can achieve that effect. The page in question looks like it simply uses an image background in a css style. The simplest example is;
1 Image Background
#link1 {
background-image: url('/images/button1-trans.png')
}
#link2 {
background-image: url('/images/button2-trans.png')
}
#link1:hover {
background-image: url('/images/button1.png')
}
#link2:hover {
background-image: url('/images/button2.png')
}
1b Image Spriting
Using multiple images like requires multiple browser requests so 'image spriting' is a technique commonly used these-days to optimise the download into a single request which will then be cached resulting in a single 304 response. In Tim's case, his looks like this (although the original is transparent);
Then you use the same image for each link along with a clipping and offsetting to locate the appropriate part of the image;
#links a {
background-image:url('/images/allButtons.png')
background-position: 0px 0px; /* sets the row for all normal links */
width: 64px;
height: 64px; /* bounding box for the image */
}
#links #link1 {
background-position: 0px 0px; /* first icon on the first row */
}
#links #link2 {
background-position: -64px 0px; /* slides the image strip left to locate the second icon on the first row */
}
#links #link1:hover {
background-position: 0px -64px; /* first icon on the second row */
}
#links #link2:hover{
background-position: -64px -64px; /* second image, second row */
}
Notice the background-image in #links a? Well that's actually superfluous in this case, but it would be nice if you could do that, and then you would only need to use background-position-x in each icon and you would only need one #links a:hover which would set the common row using background-position-y:-64px but the FireFox team with their usual pedantic standards-only 'computer says no' approach decided NOT support background-position-x or y, even though every other browser does and it's in common use. Much to the chagrin of everyone who'd like to use it in this way.
However, zoom in on those buttons on the blog you linked to. See how they look all pixelated?
2 Pure CSS
You can achieve the circles at least with a combination of CSS border-style, border-width and border-radius as others have posted, but you still need the image for the center button.
3 Icon Fonts
☺☻☼☽☾☿
This is the most modern, and my preferred approach as it's fully scalable, transparent, really, really tiny and super-fast. You need to download your font of course, but SVG compresses really well. It's just text in your HTML, no images at all. No crazy CSS styling either. Checkout IcoMoon! See how you can zoom all the way in on those?
Zoom in on the icons above, and Here's a fiddle
You can use icoMoon free, but I've purchased the pro pack, it's honestly priced and the value is well worth it. It's an awesome site as you can even load up your own SVG icons and it will generate your own font for you. There's even IE6 support.
EXPLANATION
The page You show us use a images sprit with icon of all menu item, event with border. My example show how do this with simple css. You can also use images sprit but including only icon.
HTML CODE:
<ul>
<li><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
<li><span>About</span></li>
<li><span>Projects</span></li>
</ul>
CSS CODE
html, body {
background: #369BD7;
font-family: tahoma;
font-size: 12px;
}
a {
color: #fff;
}
ul {
clear:both;
margin: 0;
padding: 0;
}
ul li {
display:block;
position: relative;
float: left;
height: 80px;
width: 80px;
padding: 0;
margin-left: 10px;
list-style: none;
text-align: center;
white-space: nowrap;
}
ul li:first-child {
margin: 0;
}
ul li a {
display:block;
margin: 10px auto;
height: 40px;
width: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border: 4px solid #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: transparent url('http://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/home.png') no-repeat 50% 50%;
}
ul li a:hover {
background-color: #fff;
}
ul li a span {
display: block;
position: absolute;
bottom: 0;
left:0;
width: 100%;
text-align: center;
z-index: 1;
}
BORDER RADIUS BROWSER SUPPORT
http://caniuse.com/#search=border-radius
DEMO
http://jsfiddle.net/bartekbielawa/fgPf8/6/
The trick is to have the border-radius be half of the height and width. Then just use a gif or png for IE fallback.
.round-button {
width:100px;
height:100px;
border-radius:50px; /* be sure to add all the browser prefix versions */
}