I'm trying to create simple auto-hide menu/header with css. I use transition but I think this is not a point here.
When I hover header is should slide down and show whole content, when I move mouse away it should slideup. It works for me. I want also screen content to expand when header is slidedup. This is mayor problem. The only way I know to have div expanded on whole page (screen) is to fix its top, bottom, left & right. It does not work when top value is changing.
Please look at my code example:
http://jsbin.com/ahamid/2/edit
The green part is problematic. I tried to fix it with changing top value on hover - but it does not work when mouse is outside of content & outside of header too.
Below is code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main">
<div id="head">
<span> header </span>
</div>
<div id="content">
<span>
test content
</span>
</div>
</div>
</body>
</html>
and css:
body {
position: relative;
}
#main {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
}
#head {
display: block;
height: 50px;
top: -44px;
right: 0px;
left: 0px;
background-color: #fcc;
margin: 0px 3px;
position: absolute;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover {
height: 50px;
background-color: red;
top:0px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content {
background-color: cfc;
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 3px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#head span {
color: black;
font-weight: bold;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover span {
color: yellow;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content:hover {
top: 6px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
I think that the problem is that you set the #content as you want it to be on hover.
What you really want is that it is always that way, and only change it (downwards; increasing top) in the hover of the #head
Change the #content to:
#content {
background-color: cfc;
.....
top: 6px;
.....
}
and modify the top in the hover of the head:
#head:hover ~ #content {
top: 50px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
You can do that because head and content are siblings, so you can use the sibling selector.
This way it behaves correctly, the only strange thing comes from the transitions timing being different, but you can manage this :-)
Related
I am trying to have a corner button display new content on hover using the following setup:
<div class="panel panel-default1">
<div class="panel-body">
<div class='amg-corner-button_wrap'>
<div class="overlay"></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
</div>
</div> <!-- wrap -->
</div> <!-- panel body -->
</div> <!-- panel default -->
CSS:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap .overlay {
border-bottom: 40px solid #e8c63d;
border-left: 40px solid transparent;
bottom: 0;
height: 0;
opacity: .95;
position: absolute;
right: 0;
text-indent: -9999px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
width: 0;
}
.amg-corner-button_wrap:hover .overlay {
border-bottom: 800px solid #e8c63d;
border-left: 800px solid transparent;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap .overlay-content {
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.amg-corner-button_wrap .overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover .overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Here is fiddle : https://jsfiddle.net/ar3jkuvq/
The hover deployment works well but the .overlay-content text does not show up if .amg-corner-button_wrap uses position: absolute. However I need it to keep the hover on the wrap only.
How can I keep the hover effect on the wrap only and show the text content at the same time?
You can use CSS3 transform property to scale the overlay instead of using a border, and then use a General sibbling combinator [w3] selector ~ to select the .overlay-content element that is preceded by a .amg-corner-button_wrap:hover.
Working fiddle
add this class in your css
.amg-corner-button_wrap{
width:100%;
height:100%;
}
I believe you can make use of the pointer-events attribute here.
Remove position: absolute; from .amg-corner-button_wrap
Add pointer-events: none; to .panel-default1
Add pointer-events: all; to .amg-corner-button_wrap .overlay
Working JSFiddle
.Button_Image {
width: 40px;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
opacity: 1;
}
.Button:hover .Button_Image {
opacity: 0;
}
.Button_Name {
font-size: 18px;
color: black;
line-height: 40px;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
opacity: 0;
}
.Button:hover .Button_Name {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="Button btn btn-success btn-block">
<img class="Button_Image" src="https://i.stack.imgur.com/hiAkR.png">
<span class="Button_Name">Football</span>
</a>
I have a button which has 2 elements inside.
Image of a sport
Name of the sport
When either of these have the css value display: none; the visible one is aligned to center perfectly.
But I needed to add a fade-in-out functionality, so I wasn't able to use display keyword. Instead I went for opacity.
Which resulted these 2 elements to stay side by side even if one is hidden.
How can I center these, when the other one is hidden?
This image has been captured during the transmission event:
The current state is like this:
But I need it like this:
You can achieve what you want with absolute positioning of the image. Is something like this what you want?:
.sportbtn {
border: green 1px solid;
width: 150px;
height: 40px;
position: relative;
line-height: 40px;
}
.sportimg {
/* centered in button */
width: 30px;
transition: left 1s, margin-left 1s;
position: absolute;
left: 50%;
margin-left: -15px; /* half the image width */
margin-top: 5px;
}
.sportname {
transition: opacity 1s;
opacity: 0;
margin-left: 40px;
}
.sportbtn:hover .sportname {
opacity: 1;
}
.sportbtn:hover .sportimg {
margin-left: 0px;
left: 5px;
}
<div class="sportbtn">
<img class="sportimg" src="https://d30y9cdsu7xlg0.cloudfront.net/png/23344-200.png" />
<span class="sportname">Football</span>
</div>
I'm trying to create a hover button using the following code and it works relatively okay in all browsers except Chrome:
<div id="blur" class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_0 et_always_center_on_mobile et-animated">
<a href="http://vina.typesetdesign.com/wines/reserva/reserva-sauvignon-blanc/">
<img alt="" src="http://vina.typesetdesign.com/wp-content/uploads/2015/11/2015_11_17Vina_Echeverria_Reserva_Sauvignon_Blanc_V1.png">
</a>
</div>
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
background-color: #6d8e3b;
color: #fff;
content: "Learn More";
display: block;
font-size: 12px;
margin-left: auto;
margin-right: auto;
opacity: .9 !important;
padding: 18px;
position: relative;
top: 20em;
width: 70px;
z-index: 2;
margin-top: -3em;
}
For some reason, Chrome won't let you hover over the button without it glitching out and flickering super badly. Is there an easy way around this without having to add in a separate button?
Live Page: http://vina.typesetdesign.com/wines/varietal/
Fiddle: https://jsfiddle.net/35txpy8v/
It's flickering because the element moves while you hover over it. The reason the element is moving is because of the pseudo element's positioning. To work around this, I'd suggest absolutely positioning the pseudo element relative to the parent element. In doing so, the pseudo element's position won't have any effect on the parent element.
Updated Example
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
content: "Learn More";
background-color: #6d8e3b;
position: absolute;
top: 50%;
margin-top: -50px;
color: #fff;
font-size: 12px;
opacity: .9;
padding: 18px;
width: 70px;
z-index: 2;
}
I developed a sidebar. However I have a issue that the button required to open the sidebar gets invisible on mobile devices. If you know the position you can click on it and it works. The button to hide it works fine.
Here is a link to the website:
https://gdi.ethz.ch/jenkins/pages/current.html
And here the relevant html:
<div id="wrapper" class="container container-fluid col-md-12">
<header><nav id="sidebar-wrapper">
<ul class="sidebar-nav">
Some menue
</ul>
</nav>
</header>
<div id="main">
the site content
</div>
<footer></footer>
</div>
And the css code:
#menu-toggle {
position: fixed;
overflow:hidden;
z-index: 1100;
background-color: #009bf0;
color: white;
top: 0;
left: 249px;
padding-left: 10px;
padding-top: 3px;
width: 40px;
height: 40px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #menu-toggle {
left: 0px;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #009bf0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Because the element is in a fixed position it is getting cut off when your screen gets smaller on mobile.
You'll either need to adjust how it handles the viewport or have its width adjust with the screen.
The problem is that the was inside the fixed #sidebar-wrapper. This resulted in an issue in chrome mobile. By moving the #menu-toggle outside the #sidebar-wrapper everything worked fine.
I'm looking for css magic here. I want the user to hover over the box which already has the text on it. Then I need the black box to rise up from below and sit behind the text.
MY JS FIDDLE HERE!
I've got this:
<div class="box expanded">
Some text
</div>
My CSS:
.expanded {
height: 179px;
font-size: 20px;
padding-top: 130px;
position: relative;
z-index: 1000;
background-color: red;
transition: transform 0.4s;
}
.expanded:after {
content: '';
position: absolute;
height: 80px;
width: 100%;
bottom: 0;
left: 0;
z-index: -999;
background-color: #000;
transform: translateY(0%);
transition: transform 0.4s, opacity 0.1s 0.3s;
}
Add overflow:hidden to the parent, .box, and set the initial position of the pseudo element to top:100%. On :hover of the pseudo element, transition it to top:0 and add some transition properties to make it smooth.
UPDATED EXAMPLE HERE
.box {
overflow:hidden;
}
.expanded:after {
content:'';
position: absolute;
height: 80px;
width: 100%;
top:100%;
left:0;
z-index: -999;
background-color: #000;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
.expanded:hover:after {
top:0;
}
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
Put this in .expanded class