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
Related
I am trying to make my css a:links only affect the body. When I add my CSS it affects all links including my menu and logo. Is there a way to do that?
Thanks
a:link {
text-decoration: none;
background-image: linear-gradient(to bottom, #FEF5DF 0%, #FEF5DF 100%);
background-repeat: no-repeat;
background-size: 100% 0;
background-position: 0 111%;
transition: background-size .25s ease-in;
padding: 2px 2px 0px 0;
border-bottom: 2px solid #E2DDCA;
transition: all 0.3s;
}
a:hover {
background-size: 100% 88%;
cursor: pointer;
border-bottom: 2px solid #f8cd5f;
transition: background-size .25s ease-in;
}
Everything on your html page is contained within the body tag, so if you style your links, they're going to affect those links everywhere.
If you just want to style the links in a specific block, wrap that block in a div, give it a class, and then target a links within that class.
<body>
<div class="my-content">
My Link
</div>
<div class="everything-else">
My Link
</div>
</body>
CSS:
.my-content a:link { ...styles here...}
.my-content a:hover { ...styles here...}
Add a class to specific links you want to affect and then add the CSS to that class as follows:
HTML
link 1
link 2
link 3
And then your CSS would be as follows:
.mylink{
/*your css*/
}
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;
}
I am trying to make two buttons animate from small to large on hover using CSS. I have the following which does make the button change but without no animation. (button.png and buttonHover.png are the same pixel width and height - but the images are of a small button with a transparent surround and a large button).
It may well be that this is the wrong way to do it - this is the first time I have trued this.
a.button {
background: url(button.png) no-repeat 0 0;
width: 150px;
height: 62px;
display: block;
line-height: 62px;
text-align: center;
font-size:9px;
color: white;
}
a.button:hover{
background: url(buttonPressed.png) no-repeat 0 0;
font-size:14px;
-webkit-animation: myButton 1s; /* Chrome, Safari, Opera */
animation: myButton 1s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myButton {
background: url(buttonHover.png) no-repeat 0 0;
font-size:14px;
}
/* Standard syntax */
#keyframes myButton {
background: url(buttonPressed.png) no-repeat 0 0;
font-size:14px;
}
No need for keyframes; use transition.
As Zach mentioned in the comments, background images can't be animated between. You should recreate the backgrounds in CSS.
From the MDN:
The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.
Example
In this example, the "all" indicates that every difference between the normal state and :hover that can be animated should transition over 0.5 seconds. Here is a complete list of animated properties.
Use the appropriate browser prefixes before the non-prefixed transition as needed. Depending on your needs, browser prefixes could be unnecessary. Have a look over here on caniuse.com for an overview of browser support.
a.button {
background: #000;
width: 150px;
height: 62px;
display: block;
line-height: 62px;
text-align: center;
font-size: 9px;
color: #FFF;
transition: all 0.5s;
}
a.button:hover {
background: #F00;
font-size: 14px;
}
<a class="button">Button</a>
Im leaving you a working example on how to implement it. Hope it helps.
button {
width : 100px;
height: 20px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
button:hover {
width : 150px;
height: 30px;
}
<button>
JSfiddle
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)
I am currently working on my portfolio site. I am using a Javascript to animate the header when scrolling (this is the tutorial I have followed).
It basically displays a larger header and logo when you scroll all the way to the top of the page. When you scroll down below 300 pixels it will reduce the height of the header in a graceful manner using CSS transitions. The larger logo will be swapped with a smaller version of the logo (as seen below). The tutorial was not intended for images but I made some small alterations to make it work.
.logo {
display: block;
float: left;
width: 180px; height: 60px;
margin-top: 29px;
background: url(../images/logo-large.svg); background-repeat: no-repeat;
font: 0/0 a; text-shadow: none; color: transparent;
}
.logo-shrink {
display: block;
float: left;
width: 90px; height: 30px;
margin-top: 14px;
background: url(../images/logo-small.svg); background-repeat: no-repeat;
font: 0/0 a; text-shadow: none; color: transparent;
}
I am wondering if there is any way that I can apply CSS transforms and transitions to make the swap less jarring? Would it be possible to maybe use a single image and scale it up or down? I apologise if this is a silly question, I am quite new to this :) Please let me know if you need me to provide more details.
Any help would be greatly appreciated :)
Instead of swapping the class, just add and remove class .logo-shrink. Add CSS transitions in class .logo...
.logo {
display: block;
float: left;
width: 180px; height: 60px;
margin-top: 29px;
background: url(../images/logo-large.svg); background-repeat: no-repeat;
font: 0/0 a; text-shadow: none; color: transparent;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.logo-shrink {
width: 90px; height: 30px;
margin-top: 14px;
}
If the animation feels jerky then you can transform and transition on a parent div, as SVG 1.1 does not allow this style to be applied on the SVG tag (though I think it works in Webkit anyways).
The easiest way is using CSS3 transforms:
e.g.
<svg style="-webkit-transform: rotateZ(30deg); transform: rotateZ(30deg); -moz-transform: rotateZ(30deg);" width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9">
</svg>
Obviously, you can apply the styling using classes or whatever.