i'm trying to enable the :target on some element, and it seems to work on IE, Firefox, and even Chrome on my phone, but somehow it wont work on my Chrome Desktop. any suggestions?
HTML (deleted the irrelevant code) :
<nav class="main-nav" id="main-nav">
THE GYM
</nav>
<div class="page-wrap">
<div class="content">
<div class="gym" id="gym"></div>
</div>
</div>
CSS:
.gym {
z-index:3;
position:fixed;
height:200px;
width:100%;
background:#fff;
bottom:0;
left:0;
box-shadow:2px 4px 4px rgba(0, 0, 0, 0.4);
margin-bottom:-200px;
transition: margin-bottom ease 1s;
-webkit-transition: margin-bottom ease 1s;
-o-transition: margin-bottom ease 1s;
-moz-transition: margin-bottom ease 1s;
}
#gym:target {
margin-bottom: 0;
}
By the way, when i tried to do this method with JS, with the .css function, it won't even work...the site is on boazkerengil.com
I don't know that anything is broken. It's just a white box that appears, correct? If so, it is working. Here is a screen recording of what happens: http://cl.ly/VWDf. I am using Chrome Mac 34.0.1847.137.
Related
and sorry for my horrible english.
I have got a problem with CSS and transition.
I need to make a div 100px x 100px, it's just an example of course.
When I put cursor hover it, it should grow and be 500px x 500px.
And here, everything is fine and working.
The thing is, when i remove the cursor, I need that the div return back to 100x100px, but it won't have a transition, it just disappear and return 100x100px.
How can I fix this?
Here is the code i use.
<html>
<head>
<style>
div.resize {
width: 100px;
height: 100px;
background: rgb(80,80,80);
}
div.resize:hover {
width: 500px;
height: 500px;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="resize"></div>
</body>
</html>
Currently you are saying that there can only be an animation while hovering. You want the animation to reverse once you have left the element (you no longer hover), but that is not allowed, as the div without hover has no animation set.
Just put the transition-duration: 1s on the 'div.resize' instead of on the 'div.resize:hover' and it is fixed.
Here you go. Just move the transition to the container rather than the :hover. I included the prefixes for other browsers as well. If you want to see how you can modify the transitions, check out W3 Schools.
div.resize {
width: 100px;
height: 100px;
background: rgb(80, 80, 80);
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
div.resize:hover {
width: 500px;
height: 500px;
}
<body>
<div class="resize">
</div>
</body>
This is my website http://aaronisdead.com/sites/dejatest/deja.html
When viewed in Chrome, it looks almost exactly what I want it to. In Firefox, all of the text is in the center of the page instead of the center of divs. There's also a problem with the filter that causes every div to appear black(a big problem when the entire site is pictures)
HTML Structure
<div id="container">
<div id="row">
<div class="cell A1"><img class="spacer" src="spacer.png"><div id="text">MIKEY<br/><p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div></div>
<div class="cell A2"><img class="spacer" src="spacer.png"><div id="text">ERIC<br/><p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div></div>
<div class="cell A3"><img class="spacer" src="spacer.png"><div id="text">MIKEY<br/><p>EPHEMERA</p>DIGITAL COLLAGE</div></div>
<div class="cell A4"><img class="spacer" src="spacer.png"><div id="text">ERIC<br/><p>REJJIE SNOW</p>SITE DESIGN</div></div>
</div>
This is just one row, there are three more with the exact same structure
CSS:
I've reduced a lot of the code into just the code for one row for simplicity reasons
.A1, .A2, .A3, .A4 {
position:relative;
}
.A1:before, .A2:before, .A3:before, .A4:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-filter .2s ease-in-out;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(90%) brightness(30%); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
.A1:before {background-image:url('spindrift.jpg'); background-size:cover;}
.A2:before {background-image:url('daynnite.jpg'); background-size:cover;}
.A3:before {background-image:url('ephemera.jpg'); background-size:cover;}
.A4:before {background-image:url('rejjiesnow.jpg'); background-size:cover;}
.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before, {
-webkit-filter:none;
}
/* text hover */
div.cell:hover #text{
opacity:0;
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
#text{
opacity:1;
display:table;
position:absolute;
z-index:999;
color:#ffffff;
text-align:center;
width:100%;
top:44%;
left:0;
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
font:12px ProximaNovaRegular, sans serif;
text-decoration:none;
}
p {
font:16px ProximaNovaBold, sans serif;
margin:0;
padding:1 0 1 0;
}
/*Table rules*/
.container{
display:table-row;
width:100%;
}
.row{
display:table-row;
width:100%;
}
.cell{
position:relative;
display:table-cell;
width:700px;
height:auto;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
html{
margin:0;
padding:0;
height:100%;
width:100%;
}
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color:black;
color:black;
}
/* hover */
div.cell:hover {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
opacity:1.0;
}
I'm not sure what's causing this and I hate asking such a vague question here so I've included a lot of code..If .cell {display:table-cell;} is disabled, the site turns into something recognizable. I realize there's a grayscale filter that's not working on Firefox, but my main concern here is getting the text in the center of the divs.
Feel free to check out the source code on the actual site.
You should have a doctype tag first in your document. Right now you have nothing that tells the browser what HTML version you want to use, so it will use Quirks mode, which is basically to be compatible with the oldest browser that you can imagine.
Your HTML markup is invalid, at least for the HTML version used. You have <div> elements inside <a> elements, and that is only allowed in HTML 5. Unless you have a doctype tag that says that you are using HTML 5, the browser will try to fix the markup, for example by moving the div outside the a.
Your markup has other errors, for example elements nested wrong. You have elements nested like this:
<div>
<a>
<img>
<div>
</div>
</div>
</a>
As you see, the div and a ending tags are in the wrong order.
You have the style sheed completely outside the HTML document. It should be inside the <head> tag.
The <head> and <title> tags are missing. They are required elements in an HTML document.
Fixing these issues will give you the basics for getting a consistent result in different browsers.
Remove from your #text
position:absolute
I tested on FF28 and it works.
Let me know if this is what you want.
and your background its not showing in FF, try adding all Vendors in your background-image:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
You don't have a doctype so you are in 'quirks mode' and it's like 1995 all over again and no two browsers may look the same. All new web pages MUST have a doctype. Use this one:
<!DOCTYPE html>
That will put all browsers into 'standards mode'.
Unfortunately, because you didn't start out in standards mode, this may make your page move around a bit and look different than it does now but it must be done.
In addition, your markup is invalid cause you put your script tags outside of the html element. The html element is, essentially, the document itself and you can't do that.
For a complete list of all your errors, plug in your site link here. Right now, it shows 98 HTML errors alone.
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
I'm trying to put a vignette on an image link, that when hovered over dissipates. The current code I'm using works fine in Firefox, but in chrome, the transition effect doesn't run.
If you were to remove the thumbnail image, the background has the same effect and does show the transition on it.
Is this a bug?
<article>
<div class="thumbnail">
<img src="images/download.jpg" alt="" />
</div>
<div class="article-text">
<h3>Article Header</h3>
<div class="author">
Author Name here. Date Posted Here.
</div>
<p>Lorem ipsum</p>
<div class="meta">
<ul class="meta-items">
<li>Arbitrary Number</li>
</ul>
<a class="button" href="#">
<span>Read More</span>
</a>
</div>
</div>
</article>
The full css/html can be seen on JSfiddle:
http://jsfiddle.net/aSTKK/
No, it is not a bug. Transitions on pseudo-elements only work in Firefox (personally, I'd like to see them working in other browsers in the future), though there is a way to emulate them for some properties. If you remove the thumbnail image, you see the transition on the element itself (which is below the image when you have it), not on the pseudo-element.
Possible solution: you could make the image semitransparent and change its opacity to 1 on hover (see this gallery of examples I did a while ago, especially row 3, column 3).
Something like this (I've changed the shadow on the pseudo-element to red in order to make it more visible).
Relevant CSS:
.thumbnail {
width:48%;
height:200px;
float:left;
padding:0;
background:#37779f;
box-shadow: inset 0 0 230px 40px rgba(0, 0, 0, 0.5);
-webkit-transition: 1.3s;
-moz-transition: 1.3s;
transition: 1.3s;
overflow:hidden;
text-align:center;
}
.thumbnail a{
position:relative;
max-width:100%;
float:left;
}
.thumbnail:hover{
box-shadow:inset 0 0 115px 20px rgba(0,0,0,0.5);
}
.thumbnail a:after{
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
box-shadow:inset 0 0 115px 20px rgba(255,0,0,1);
}
.thumbnail img {
width:100%;
height:auto;
opacity: .3;
-webkit-transition: 1.3s;
-moz-transition: 1.3s;
transition: 1.3s;
}
.thumbnail:hover img {
opacity: 1;
}
I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.
All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).