I have a mobile menu that slides to the left from off the screen to the right. It works very well using the below code. However, when it's off the screen, I can actually scroll my mobile view over to the right and see it off the screen rather than not be shown at all, and the mobile screen width staying put. How do I fix this issue?
.mobile-menu {
width:200px;
border:1px solid #eee;
background-color:#f2f2f2;
height:285px;
position:absolute;
top:35px;
right:-200px;
z-index:99999;
display:none;
-webkit-transition: right 0.1s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: right 0.1s ease-out; /* Firefox 4-15 */
-o-transition: right 0.1s ease-out; /* Opera 10.50–12.00 */
transition: right 0.1s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.mobile-on-screen {
right:0 !important;
display:block;
}
I can't see your full code, however, I would guess that what is probably missing is an overflow: hidden; on the parent div, or body.
For closed state of menu
body {
overflow-x: hidden;
}
And for open state of menu toggle a class on body
body.menu-open {
overflow: hidden
}
Related
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 having a problem with this css transition code. It expands to a new height on hover fine, but I need it to go back to it original height when out hover or mouseout. (Like a pencil ad) Currently, on mouseout it stays expanded and the cursor is stuck on the hyperlink. Current page link is http://hswheels.autoconx.com/
Any help would be great appreciated.
.grow {
height: 30px; /* Origional height */
width: 780px; /* Origional width */
transition:height 0.5s ease-in-out; /* Animation time */
-webkit-transition:height 0.5s ease-in-out; /* For Safari */
}
.grow:hover {
height: 345px; /* This is the height on hover */
background:url('http://www.heraldstandard.com/app/media/wheels/expanded2.jpg')
}
.grow:hover a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
Because you have your anchor set to position:absolute, it's taking up the full page.
You simply need to set position:relative on the parent element (in this case .grow) so that the anchor is absolutely positioned to the parent, instead of the page.
.grow {
position:relative;
height: 30px; /* Origional height */
width: 780px; /* Origional width */
transition:height 0.5s ease-in-out; /* Animation time */
-webkit-transition:height 0.5s ease-in-out; /* For Safari */
}
added a fiddle: http://jsfiddle.net/3nuhev2k/2/
Your problem seems to be the 100% height and 100% width on your link on hover. It is as big as your website.
I've been trying to achieve this effect to my site, but it seems that the code isn't working.
Here's the sample site.
And here's the site I'm working on.
I'm mainly changing this part of the theme..
.main-content-area img.wp-post-image {
min-width: 100%;
height: auto;
}
.main-content .wp-post-image {
}
.main-content-area img {
max-width: 100%;
}
Changing the min-width and height would reflect the changes, I'm not sure how to do it when hovering the image. Any advice would help. Thanks!
Maybe try the CSS Transform Scale, paired with CSS Transition (which makes the css changes happen over a set interval of time). Not my Fiddle, but here it is:
http://jsfiddle.net/27Syr/1206/
.image {
width: 100%;
height: 100%;
}
.image img {
-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;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Feel free to ask me anything else if you have any questions about it.
Two days ago I asked for help with animation css3.
Here is my animation: [link]http://jsfiddle.net/SD58Z/8/[/link]
Everything works fine, but I have another question. It is possible to set width of this line automatically, that this line fit properly regardless of the length of link text? The point is this line is too short when my title is longer.
I just created a mod and line shows correctly but my animation disappeared.
[link]http://jsfiddle.net/DashDesign/SD58Z/284/[/link]
I'm not exactly sure what you are trying to do, but this makes the underline span to 500px.
.line{
font-family:Tahoma;
width:0px;
position: absolute;
background:black;
transition:width 0.4s ease ;
-moz-transition: 0.4s ease ; /* Firefox 4 */
-webkit-transition: 0.4s ease ; /* Safari and Chrome */
-o-transition: 0.4s ease; /* Opera */
}
div:hover{
width:500px;
}
.line div{
background:#fff;
position:relative;
bottom:1px;
}
}
2 changes were the width on hover and your fiddle was missing a closing brace at the end
I have this problem in my really easy css file, that I want to transform a div from 75px in height and width with :hover, but it seems to only change the width.
#ich{
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition: 2s; /* Safari and Chrome */
-o-transition: 2s; /* Opera */
margin-top:40%;
width:75px;
height:75px;
border-radius:35px;
background-image:url(fb.jpg) ;
background-repeat: no-repeat;
background-position: center;
text-align:center;
display:block;
}
#ich:hover{
width:300px!important;
height:300x!important;
background-size: 300px 300px;
}
The HTML is just a div with id #ich in the body part, nothing else.
height:300px!important;
you just put "300x" instead of "300px"