I have bottom line, on the right side there are grey div, I want on hover to show up full that div. At the beginning grey div is hidden. How could I solve this problem? Thanks!
There is fiddle link
<body>
<div id="wrap">
</div>
<div id="footer">
<div class="container">
<div id="footer_right_wrapper"></div>
</div>
</div>
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -61px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
#footer {
height: 61px;
background-color: red;
color: black;
}
.container {
height: 61px;
overflow: hidden;
}
#footer_right_wrapper {
width: 100px;
height: 217px;
background-color: grey;
float: right;
}
Use :hover selector attribute:
show/hide grey element:
Fiddle: http://jsfiddle.net/or2y2fzg/
#footer_right_wrapper {
display: none;
}
#footer:hover #footer_right_wrapper {
display: block;
}
If I understood you correctly, you want to show the grey div once you hover your cursor over the #footer?
.
Expand grey element:
If you want to expand grey element to fill #footer element: http://jsfiddle.net/r30nxzxk/
#footer_right_wrapper {
width: 100px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#footer_right_wrapper:hover {
width: 100%;
}
Note that I added CSS transition to have a smooth UX.
Related
I want to create full screen background image within a bootstrap-grid so that it can be responsive.
I created a row and made it to 100% height so that it can fit the entire screen.
Added a 1024*768px resolution image , it perfectly appeared in background but with scroll bars.
I just want to get rid of the scroll bars so that it fit in screen. Here is my html
html,body,.container-fluid{
height:100%;
}
.row{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 100vh;
}
<div class="container-fluid">
<div class="row" >
<img src="retail.jpg">
<div class="col-md-12">
</div>
</div>
</div>
Can someone help me ?
Here is something.
The picture is full screen, and the content is on bottom.
If you remove the content, the scrollbar wont appears.
Bootply: http://www.bootply.com/sFNwejI4ow
CSS:
html,body,.container-fluid{
height:100%;
}
.full{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
HTML:
<div class="container-fluid">
<div class="row full">
<img src="//placehold.it/640x480">
</div>
<div class="row">
<div class="col-md-12">
Custom content
</div>
</div>
</div>
This should by default remove both horizontal and vertical scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
Sadly, this will also disable scrolling on page.
Alternatively, you can implement Fancy Scrolling. The scrollbar is thinner, looks better on page and has smooth scrolling.
Try this:
Here's the script: Link
Implementation:
First call the plugin on a container.
<script>
$(function() {
$( "#demo" ).customScroll();
});
</script>
Here's the CSS:
.phancy-scrollbar {
width: 5px;
border-radius: 4px;
top: 0;
position: absolute;
background: #ccc;
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
transition: opacity .2s;
-webkit-transition-delay: 1s;
opacity: 0;
}
.phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar {
opacity: 1;
-webkit-transition-delay: 0s;
}
.phancy-scrollbarbutton {
width: 100%;
border-radius: 4px;
top: 0;
position: absolute;
background-color: #999;
}
Hope this helps. Cheers!!
/* attributes overflow, background-size modified */
html,body,.container-fluid{
height:100%;
overflow: hidden; // -> newly added
}
.row{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain cover; // modified here
width: 100vw;
height: 100vh;
}
plunker demo
So I'm learning CSS transitions and transforms and am trying to make a simple slider in CodePen. The basic idea is that I have one div on top of another and I want the first one to slide off the second when hovered on. It works fine without any overflow property, but once I added overflow: hidden to the underlying square, it pushes the overlying square down. Why is this?
http://codepen.io/johnnycopes/pen/BKReOq
--- HTML ---
<div class="container">
<div class="shape">
<div class="shape-cover">
</div>
</div>
</div>
--- CSS ---
body {
font-family: Verdana;
background: #fff0a5;
}
.container {
margin: 0 auto
}
.shape {
margin: 50px auto 0;
width: 200px;
height: 200px;
overflow: hidden;
background: #ffb03b;
}
.shape-cover {
margin: 50px auto 0;
height: 200px;
width: 200px;
background: #468966;
transform: translateX(0%);
transition: transform .5s ease-in-out;
}
.shape-cover:hover {
transform: translateX(100%);
}
It is because you are using a margin on the "overlaying square".
shape-cover is inside the shape, so the margin of the shape-cover will me relative to its parent.
So try removing the margin on the shape-cover div.
I want whenever I scale - adjacent elements to move accordingly. How can I do that? Whenever I do scale it goes on top of adjacent element.
jsbin
In opposite to that if I change width value it works as I wanted, yet I can't use width in transitions.
HTML:
<input>
<div class="foo">
CSS:
input{
display: inline-block;
transition: all 1s ease;
transform-origin:left;
}
input:focus{
transform: scaleX(2)
}
.foo{
display: inline-block;
width: 200px;
height: 20px;
background-color: red;
}
Remember to set both an initial and a destination value for your transitions, like so:
input{
display: inline-block;
vertical-align: top;
transition: width 1s ease;
transform-origin:left;
width: 100px;
}
input:focus{
width: 200px
}
JSBin illustrating this here
This was originally for transitioning two properties at different speeds but was informed you can't transition overflow. So now I'm just asking how to stop overflow auto from displaying the scroll bars during height transition. The original post is below.
I want to transition the height and width of a content box at 0.3s but want the overflow-y at 1s or delay then same. I'm mostly trying to make it so that when the transition takes place the scroll bars don't flash from there to not.
.barOpen {
-webkit-transition: height 0.3s ease-out
height: 225px
width: 98.5%
margin: 0.25%
padding: 0.5%
background-color: #28251f
color: white
opacity: 1
overflow-x: hidden
overflow-y: auto
float: left
}
.barClose {
-webkit-transition: height 0.3s ease-out
width: 100%
background-color: #d79e12
height: 0
overflow-x: hidden
overflow-y: hidden
float: left
}
Overflow is not animatable, but you can use container with overflow: hidden and apply transitions to that container.
.barContainer {
-webkit-transition: height 0.3s ease-out;
width: 100%;
overflow: hidden;
float: left;
}
.barContainerOpen {
background-color: #28251f;
height: 225px;
}
.barContainerClose {
background-color: #d79e12;
height: 225px;
}
.bar {
height: 225px;
width: 98.5%;
margin: 0.25%;
padding: 0.5%;
background-color: #28251f;
color: white;
opacity: 1;
overflow-x: hidden;
overflow-y: auto;
}
Simplified Jsfiddle
At the moment i am working on a header with a slider animation (css3 only):
http://jimmytenbrink.nl/slider/
Everything is working fine except sometimes the slider is bugging if you go from the center to the right. It seems that i need to stop the animation for a few miliseconds to complete. However i searched everywhere on the internet but i cant seem to get it to work.
Anyone here has experience with it who can help me out?
HTML
<header>
<div><span>slide 1</span></div>
<div><span>slide 2</span></div>
<div><span>slide 3</span></div>
<div><span>slide 4</span></div>
<div><span>slide 5</span></div>
<div><span>slide 6</span></div>
<div><span>slide 7</span></div>
<div><span>slide 8</span></div>
</header>
CSS
header {
margin-top: 10px;
width: 800px;
overflow: hidden;
height: 500px;
}
header div {
background-color: #000;
width: 43.8px;
height: 200px;
position: relative;
float: left;
-webkit-transition: width .3s;
transition: width .3s;
overflow: hidden;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
margin-right: 2px;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child {
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header div img {
position: relative;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -350px;
opacity: 0;
width: 450px;
font-family:'Fugaz One', cursive;
text-transform: uppercase;
font-size: 24px;
color: #fff;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
width: 43.8px;
}
header:hover > div:hover {
width: 150px;
}
Here is a JSFiddle
So the question is, how can i set a stop on the animation for a few miliseconds so the animation can finish before it gets triggered again?
Hope my question is clear!
(thanks for the edit)
One might call my answer a workaround. Maybe it is but according to my comment on ExtPro's answer - it is still completely pure CSS.
I decided to use display: table-cell since the table cell's width is distributed equally.
So, the CSS might look like this:
HINT: This is only a bunch of necessary CSS. All the code is in the jsFiddle
header {
width: 368px;
display: table;
overflow: hidden;
}
header > div {
width: 44px;
height: 200px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
overflow: hidden;
}
header > div:hover {
width: 151px;
}
Fiddle
As you can see, we don't have to determine the width of all not-hovered divs. Actually, the problem came from that very CSS rule:
/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
width: 43.8px;
}
You were changing the width of the divs on header:hover, so when the transition didn't manage to do its job in time, you came out with mouse pointing to the header but to non of the divs.
If I understand what you mean by 'bugging', what is happening is if you move the mouse quickly to the right, it traverses the currently open div and is left in an area which when that div collapses, does not contain (e.g. the mouse is not hovered over) the next one in order to expand it- namely the hover event of the following div(s) is/are not firing thus they do not expand. There wont be a CSS fix for this Im afraid as its browser related, you may want to replace with jQuery/JS.