I'm working on a website and I've just noticed that the body doesn't seem to accept overflow:hidden on the Google Chrome app on my Samsung phone. I used to have an iPhone and I didn't experience this problem with the Chrome iOS app, but I've noticed that this code is sketchy at best – I also had a difficult time getting it to work on Safari desktop browser. I've tried using a wrapper around my content and this hasn't made any difference.
What happens is that when the user opens the push menu using the button on the left of the header, the viewport seems to expand, so the header extends in order to fill it, making the logo and the other button slide to the right. You're then able to scroll right and zoom out further, making everything smaller and breaking my meta viewport tag, which I obviously want to avoid. I've tried using touch-action: pan-x; which stops the user scrolling right, but doesn't actually solve the issue of the viewport expanding and taking the header with it.
Adding overflow-x:hidden to the html tag solves this problem on mobile, but that in turn breaks the overflow:hidden I've added to the body and allows users to scroll up and down on the desktop version when the menu is open.
I've created a jsFiddle below, but I've been unable to recreate this problem. I've left the relevant code from my site below along with a link to a page in which the problem occurs. I've also left a link to another website with a structure that I've imitated on my own site. They seem to have been able to make it work, and yet I've copied the code they're using on their html and body but it behaves very differently on mine.
Could anybody tell me if I've missed something, or how they're managing to do this and I can't on mine?
My website – http://www.lucieaverillphotography.co.uk/product-category/prints/
Other website where this seems to work – https://www.etq-amsterdam.com/about/
jsFiddle
https://jsfiddle.net/75dtb1zk/40/
HTML
<header class="header">
<span id="button-one"></span>
<span id="button-two"></span>
<div class="overlay"></div>
</header>
<div class="push-menu-one"></div>
<div class="push-menu-two"></div>
<div class="content">
</div>
<footer class="footer">
</footer>
CSS
/* MAIN SITE STRUCTURE */
html {
position:relative;
height:100%;
background-color:pink;
}
body {
width:100%;
min-height:100%;
margin:0;
padding:0;
overflow-x:hidden;
display:flex;
flex-direction: column;
}
.header {
position:fixed;
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
height:55px;
z-index:10;
background-color:#fff;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.content {
flex: 1;
width:85%;
margin-top:80px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.footer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
flex-direction: column;
align-items: center;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
background-color: #efefef;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
/* PUSH MENUS */
#button-one {
display:inline-block;
width:30px;
height:30px;
margin:20px;
background-color:green;
cursor:pointer;
}
#button-two {
display:inline-block;
float:right;
width:30px;
height:30px;
margin:20px;
background-color:orange;
cursor:pointer;
}
.push-menu-one {
position:fixed;
top:0px;
left:0;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:purple;
transition: all .6s cubic-bezier(.645,.045,.355,1);
transform:translate3d(-295px,0px,0px)
}
.push-menu-two {
position:fixed;
top:0px;
right:0;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:purple;
transition: all .6s cubic-bezier(.645,.045,.355,1);
transform:translate3d(295px,0px,0px)
}
.overlay {
position:fixed;
z-index:9;
top:0px;
left:0px;
width:100%;
height:100%;
pointer-events:none;
background-color:#000000;
opacity:0;
transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}
/* TOGGLE CLASSES */
body.open-left,
body.open-right {
overflow:hidden;
}
body.open-left .header,
body.open-left .content,
body.open-left .footer {
transform:translate3d(295px,0px,0px)
}
body.open-right .header,
body.open-right .content,
body.open-right .footer {
transform:translate3d(-295px,0px,0px)
}
body.open-left .overlay,
body.open-right .overlay {
width:100%;
height:100%;
opacity:0.4;
pointer-events:auto;
}
body.open-left .push-menu-one {
transform:translate3d(0px,0px,0px)
}
body.open-right .push-menu-two {
transform:translate3d(0px,0px,0px)
}
jQuery
jQuery(document).ready(function($) {
$('#button-one').click(function() {
$('body').toggleClass('open-left');
});
$('#button-two').click(function() {
$('body').toggleClass('open-right');
});
$('.overlay').click(function() {
$('body').removeClass('open-left');
$('body').removeClass('open-right');
});
});
I am new to HTML and CSS. At the moment, I am trying to learn them. What I want to do is hiding a div and showing him only if you hover on another div. I almost did it, but I do not know how exactly to block the div and let only the hovered part of the div visible. (Tried with display:block; and visibility:hidden; but nothing seems to work). If someone could help me I would be really thankful. Thanks in advance.
PS: The idea is when you hover on "Menu" to hover automatically a div called "OnThisPage".
body{
margin:0;
padding:0;
background-color:#232323;
}
#NavigationWrap{
position:relative;
width:100vw;
height:5vw;
background-color:#FFFFFF;
}
#Logo{
position:relative;
margin-left:1vw;
top:50%;
width:29vw;
height:4vw;
transform:translateY(-50%);
float:left;
}
#NavigationMenu{
position:relative;
top:50%;
width:70vw;
height:2vw;
float:right;
transform:translateY(-50%);
}
#NavigationMenu li{
position:relative;
top:50%;
list-style-type: none;
float:right;
transform:translateY(-50%);
}
#NavigationMenu li:after{
position:relative;
margin-right:1vw;
font-family: 'OpenSans_Bold';
font-size:2vw;
content:"|";
}
#NavigationMenu li:first-child:after{
content:" ";
}
#NavigationMenu li a{
position:relative;
margin-right:1vw;
font-family: 'OpenSans_Bold';
font-size:2vw;
color: #cc6666;
text-decoration: none;
}
#NavigationMenu li a.active{
color:#00cccc;
}
#NavigationMenu li a.active:hover + #OnThisPage:hover{
color:#000000;
}
#NavigationMenu li a:hover{
position:relative;
color:#00cccc;
-webkit-transition: all 750ms ease;
-moz-transition: all 750ms ease;
-ms-transition: all 750ms ease;
-o-transition: all 750ms ease;
transition: all 750ms ease;
}
#OnThisPage{
position:relative;
}
#OnThisPage:hover{
position:absolute;
font-size:20vw;
top:10vw;
left:10vw;
width:10vw;
height:10vw;
background:red;
}
<div id="NavigationWrap">
<div id="Logo">Logo</div>
<div id="NavigationMenu">
<li>Login</li>
<li>Contact</li>
<li>Featured Projects</li>
<li>About Me</li>
<li><a class="active" href="#home">Home</a></li>
</div>
<div id="OnThisPage">Test</div>
Here you go with jQuery, I added comments for you so you understand what you do.
jQuery("document").ready(function() { // we wait for document to get ready state
jQuery("#NavigationMenu li a").hover(function() { // we get hover state event on Menu
jQuery("#OnThisPage").toggleClass("hover") // and we just toggle class "hover" for another div
})
})
Don't forget to load jQuery like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And very small change to your CSS code - it's not :hover, but .hover now
#OnThisPage.hover{
position:absolute;
font-size:20vw;
top:10vw;
left:10vw;
width:10vw;
height:10vw;
background:red;
}
The idea is that we toggle class for the element when the other element is hovered and apply styles not for :hover, but for this new class.
I have been trying to create a hover image effect in my website. I attached the script in the below link.
I can't able to set a hover image transition fade effect and 2s time delay.
Please help me.
<div class="imagecontainer">
<img class="myhoverimg" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="">
<div class="myhoveroverlay"></div></div>
<style>
.imagecontainer {
position:relative;
width:361px;
height:181px; }
.myhoverimg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.myhoveroverlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
}
.myhoveroverlay:hover{
background:url(http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg);
}
</style>
https://jsfiddle.net/nhu2wmdg/
You can use opacity attr to fade image...
.myhoveroverlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
opacity : 1;
}
.myhoveroverlay:hover{
background:url(http://css3.bradshawenterprises.com/images /Windows%20Logo.jpg);
opacity : 0.9;
}
Thanks for the help #Leo. Exactly what i was looking for.
jsfiddle.net/nhu2wmdg/1
I have a simple menu that I built and that I'm trying add animations to. I added a slide on hover animation but when you hover over the item the slide animation goes over the text blocking it. I'm pretty sure its going to be an easy fix that I'm over looking but help would be appreciated. The issue is coming from these CSS classes I'm pretty sure:
.nav2Active{
font-size:16px;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
width:100px;
border-left:thin solid transparent;
background:transparent;
}
.nav2Active::before{
content:'';
background:red;
position:absolute;
height:30px;
width:0%;
-webkit-transition:width .3s ease-out;
-moz-transition:width .3s ease-out;
-ms-transition:width .3s ease-out;
z-index:0;
}
.nav2Active a{
color:#000;
text-decoration:none;
padding-left:10px;
}
.nav2Active:hover::before{
border-left:thin solid #F60;
width:100px;
}
.nav2Active:active{
background: #CCC;
border-left: #F60;
}
http://jsfiddle.net/pwfv33hs/
Hay its very easy do this :
.nav2Active:hover::before{
border-left:thin solid #F60;
width:100px;
z-index:-1
}
It's a z-index issue, you set a value for the pseudo element = 0.
.nav2Active::before{
z-index:0;
}
But all elements has the same value as default. In order to work you can set a -1 value. But I don't like to work with that negative values. I suggest this:
.nav2Active a{
position:relative;
z-index:1;
}
Check the UpdatedFiddle
When I apply transition in Chrome(24.0.1312.57) on hover it does not update background-color on mouse out. See this fiddle: http://jsfiddle.net/WKVJ9/
Here is the code:
.transition{
-webkit-transition: all 500ms ease-in-out;
}
.wrapper{
width:200px;
height:200px;
display:block;
background-color:cyan;
position:relative;
}
.hoverme{
border-radius:90px;
display: block;
width:50px;
height:50px;
top:50px;
right:-90px;
position:absolute;
-webkit-transform: rotate(-45deg);
}
.wrapper:hover .hoverme{
-webkit-transform: rotate(0deg);
right:0;
}
.hoverme:hover{
background-color:red;
}
and html:
<div class="wrapper">
<div class="hoverme transition">
Hover me
</div>
</div>
If you hover .wrapper and .hoverme and then quickly move mouse away from this box the .hoverme element will only animate rotation and position.
On the site I am working on it does not even refresh hover state so when the animation is finished and the background stays with :hover background-color... Which for some reason I cannot reproduce here
Is it possible to make the background animate?
This is happening because of position:absolute in .hoverme
try changing it to position:relative add margin-left:150px; (or required) to correct position of .hoverme ... like this:
.hoverme{
border-radius:90px;
display: block;
width:50px;
height:50px;
top:50px;
right:-90px;
position:relative;
margin-left:150px;
-webkit-transform: rotate(-45deg);
}
check it in action here: http://jsfiddle.net/WKVJ9/1/