I'm trying to make a footer so that when clicked it pops up and fills the entire screen.
I do not know how to do this so the height is 100%.
I can do it with set pixels but I want it to fill the screen and not exceed the screen if a small window is open and reach halfway if its a big window.
If I set the footers container to 100% of the height the content and the animation will come to the top and animate downwards. Which it does 100% of the screen.
HTML
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>blabla</h3>
<p>blablablabla.</p>
<ul>
<li>bla</li>
<li>Bla</li>
<li>bla</li>
<li>blabla</li>
</ul>
<p>bedst i test</p>
</div>
</div>
</div>
CSS
#footerSlideContainer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 5;
}
#footerSlideButton {
background: rgba(255,255,255,0.0);
position: absolute;
top: -60px;
width:100%;
height:120px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 0;
background: white;
color: #CCCCCC;
font-size: 0.8em;
border: none;
-webkit-transition: height 700ms ease-in;
-moz-transition: height 700ms ease-in;
-ms-transition: height 700ms ease-in;
-o-transition: height 700ms ease-in;
transition: height 700ms ease-in;
}
#footerSlideContent.open {
height: 100%;
}
Maybe something like this will help in your situation:
#footerSlideContainer {
width: auto;
height: auto;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 5;
}
Related
I have an absolutely positioned image inside a relatively positioned container.
Height of image is bigger than that of the container.
I want the image to scroll up to its end using only CSS.
The catch is that height of the image could vary, so it makes sense to make sure that bottom of the image is aligned with bottom of the container once hovered.
Following is the code:
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
bottom: 0;
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
Try transition on transform
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: transform 1s ease;
}
img:hover {
transform: translateY(-60%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
EDIT:
As the height is not set, I'd suggest a jQuery/js solution
$("img")
.mouseover(function() {
var offset = -$(this).height() + 200;
$(this).css("top", offset);
})
.mouseleave(function() {
$(this).css("top", 0);
});
body {
display: flex;
justify-content: space-around;
}
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: top 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Vertical-Banner-EN.jpg">
</div>
You need a way to position the element equivalent to bottom: 0px, but taken for the reference the top .
If you set top: 100%, the top of the element will be at the bottom of the parent.
Then, set a transform of 100%, and the bottom will be where the top was.
Notice that this solution works for any image and container height.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0%;
transform: translateY(0%);
transition: all 1s ease;
}
img:hover {
top: 100%;
transform: translateY(-100%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
You can have a transition between bottom: 0 and bottom: calc(100% - 18px), which is the height of the container minus the height of box2.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
}
.box2 {
position: absolute;
height: 18px;
bottom: calc(100% - 18px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.box:hover .box2 {
background-color: green;
bottom: 0;
}
<div class="box">
<div class="box2">
test
</div>
</div>
You can use this, try this with working snippet,
.box{
position:relative;
display:block;
height:200px;
width:200px;
background-color:red;
transition: all 1s ease;
}
.box2{
position: absolute;
transition: all 1s ease;
}
.box:hover .box2{
background-color:green;
margin-top: 180px;
}
<div class="box">
<div class="box2">
test
</div>
</div>
I am making a slideshow. The parent container is called slide and has the following child elements:
prev, next and figure.
I would like the parent div to be the same size as the child element 'figure' so that the next and prev divs are aligned to the right and left of the 'figure' element. I do not wish to set the width and height of the parent fixed as it would not be responsive.
I do not wish to add the 'next' and 'prev' divs inside the 'figure' element as i plan to have a lot of figure element and would not like it to be repetitive, adding these divs inside each figure element.
/* Styles go here */
.slide{
padding: 0;
width: 100%;
display: inline-block;
margin: 0 auto;
position: relative;
}
.slide:before{
display: block;
padding-top: 25%;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, 1);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: 0.9;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
figure{
width: 100%;
position: absolute;
opacity: 0;
margin:0;
padding:0;
transform: scale(0);
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
}
img{
width: 100%;
height: auto;
border-radius: 3px;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: 1em;
bottom: .35em;
right: .15em;
color: #fff;
background: rgba(0,0,0, .9);
border-radius: 3px;
padding: .2em;
}
figcaption a{
color: #fff;
}
figure.show{
width: 100%;
opacity: 1;
position: absolute;
transform: scale(1);
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
<div id='slide' class='slide'>
<figure id="0" class="show">
<img src="http://www.naamagazine.com/wp-content/uploads/2016/05/couple-getaways-image-520x400.jpeg">
<figcaption>Some Text</figcaption>
</figure>
<span class="prev">‹</span>
<span class="next">›</span>
</div>
I would just like the parent to be responsive and same size as the child element with prev and next divs attached to the parent.
The buttons actually are aligned to the edges of the container already - the issue is just that the image doesn't scale up along with it. In your style.css, change this:
img{
max-width: 100%;
to this:
img{
width: 100%;
and you should see the image edges and the arrows line up, and scale as the window does.
As far as getting the arrows vertically centered - that could be tricky unless you set a height on the .slide element. This can still be responsive, as long as you know the aspect ratios of the images in the slides. Here's a trick to do that using bottom padding - set it based on the aspect ratio you want. Then set your images to width: 100%; height: 100%; position: relative; and as long as the proportions are right, they should all fit properly.
figure {
position: absolute;
width: 100%;
height: 0;
/* This will make a box that's always twice as wide as it is tall */
padding-bottom: 50%;
/* This one's twice as tall as it is wide */
padding-bottom: 200%;
}
I am creating a rollover on an image div where once you roll over, the image opacity goes down and text over the top appears. This works fine for just one image, but when trying it on more then one image the opacity doesn't work correctly and the text doesn't seem to appear on the other images.
HTML:
<div class="worklongdiv" style="padding-top:111px";>
<img src="images/Vividworklong.jpg"/>
<div class="work-text-content-long">
<header>VIVID VAPOURS</header>
<p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
</div>
</div>
<div class="worklongdiv" >
<img src="images/Vividworklong.jpg"/>
<div class="work-text-content-long">
<header>VIVID VAPOURS</header>
<p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
</div>
</div>
CSS:
.worklongdiv{
width: 100%;
min-height: 120px;
max-height:auto
position: relative;
background-color: black;
}
.worklongdiv:hover img {
opacity: 0.3;
}
.worklongdiv:hover .work-text-content-long {
opacity: 1;
}
.worklongdiv img {
padding: 0;
width: 100%;
display: block;
opacity: 1;
}
.worklongdiv img,
.work-text-content-long {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.work-text-content-long {
height:100px;
position: absolute;
color: white;
left: 0;
top: 25%;
right: 0%;
left:101px;
bottom: 0;
font-size: 24px;
text-align: left;
opacity: 0;
}
You're missing a ; in one of your CSS rules.
.worklongdiv{
width: 100%;
min-height: 120px;
max-height:auto;
position: relative;
background-color: black;
}
I am attempting to have 2 divs of the same size, one is initially visible while the other (below?) is initially hidden.
I desire that when you hover over the first div, the other will animate and slide upward to fully cover the first. This one should remain in place until you stop hovering over the area.
I can get a second div to move upward on hover, but it has many unwanted effects - such as a jumpy/jittery behaviour when the second div is in place - and in this fiddle, the lower one begins visible.
http://jsfiddle.net/cc28samh/1/
the HTML
<div>
<div id="stay-in-place">
<h1>hello world</h1>
<p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div id="move-in-to-place">
<h2>I'm on top</h2>
</div>
</div>
the style
<style type="text/css"> #stay-in-place {
position:relative;
height : 200px;
width : 200px;
background: red;
-webkit-transition: height 1s, -webkit-transform 1s;
transition: height 1s, transform 1s;
}
#stay-in-place:hover {
height : 0px;
}
#move-in-to-place {
position:absolute;
height : 200px;
width : 200px;
background: blue;
}
</style>
This is what I think you want:
http://jsfiddle.net/8heq7w0b/
Better: http://jsfiddle.net/sdL1vead/
<div class="box">
<div id="stay-in-place">
<h1>hello world</h1>
<p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div id="move-in-to-place">
<h2>I'm on top</h2>
</div>
</div>
CSS
#stay-in-place {
height: 100%;
width: 100%;
background: red;
position: absolute;
}
#move-in-to-place {
position: absolute;
bottom: -100%;
height : 100%;
width : 100%;
background: blue;
opacity:0;
}
.box {
position: relative;
width:200px;
height:200px;
overflow:hidden;
}
.box:hover #move-in-to-place {
bottom: 0;
-webkit-transition: all 1s, -webkit-transform 1s;
transition: all 1s, transform 1s;
width:100%;
height:100%;
opacity:1;
}
I made a improved version of http://jsfiddle.net/sdL1vead/ here http://jsfiddle.net/tongadall/trqj1qgo
html
<div class="box">
<div class="stay-in-place">
<h1>hello world</h1>
<p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div class="move-in-to-place">
<span>I'm on top</span>
</div>
</div>
CSS
.stay-in-place {
height: 100%;
width: 100%;
background: red;
position: absolute;
}
.move-in-to-place {
position: absolute;
bottom: -100%;
height : 100%;
width : 100%;
padding: 8px;
background: rgba(255, 255, 255, 0.7);
opacity: 0;
font-size: 12px;
line-height: 1.2;
}
.box {
margin: 2px;
float: left;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.box:hover .move-in-to-place {
bottom: 0;
-webkit-transition: all 0.4s, -webkit-transform 0.4s;
transition: all 0.4s, transform 0.4s;
width: 100%;
height: auto;
opacity: 1;
}
.box:not(hover) .move-in-to-place {
bottom: -100%;
-webkit-transition: all 2s, -webkit-transform 2s;
transition: all 2s, transform 2s;
width: 100%;
height: 0;
opacity: 0;
}
I was trying to implement splitting of entire content to create a slideshow. Something similar to this.
http://tympanus.net/Tutorials/FullscreenSlitSlider/
The problem is splitting of divisions equally. I just don't want them to appear to be split but actually split with the first div containing all content but only top 50% height of actual content, and second div containing all content but having only bottom 50% height of original div.
Here's what I have so far.
.container {
position: absolute;
width: 100%;
height: 20%;
}
.slide1, .slide2 {
width: 100px;
height: 50%;
/*height: 100%;*/
overflow: hidden;
position: absolute;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Here's a fiddle link.
UPDATE: This is what I want the end result to look like. This is just a quick hack that appears as though second div is split.
If you just viewed source in the demo site you supplied, you might have seen this bit of code:
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
And if you googled jquery slitslider, the first link you get is FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3
Do you looking for this..
.container {
position: absolute;
width: 100%;
height: 100%;
}
.slide1, .slide2 {
width: 100px;
height: 100px;
overflow: hidden;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Fiddle: http://jsfiddle.net/6Kz7c/3/
EDIT:
Fiddle: http://jsfiddle.net/6Kz7c/5/
This uses a jquery plugin call FULLSCREEN SLIT SLIDER
So You no need to implement it from the sketch.
Here you can find a tutorial how to use that and download the library.
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
Edit:
css
* {
margin: 0;
padding: 0;
}
body {
background: #222;
}
.reveal {
width: 300px;
height: 300px;
margin: 50px;
float: left;
}
.curve {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 150px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -225px, #f6d9ad;
background-repeat: no-repeat;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.curve:hover {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 210px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -285px, #f6d9ad;
background-repeat: no-repeat;
}
.reveal p {
font: 45px/300px Helvetica, Arial, sans-serif;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal:hover p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
}
html
<div class="reveal curve">
<p>lorem</p>
</div>
Fiddle is here
The same principle as that of vertical splitting can be used for horizontal as well. The HTML layout had to be modified a bit to get it working.
HTML
<div class="container">
<div class="slide-wrapper">
<div class="slide1">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
<div class="slide2">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
</div>
</div>
Here's a working fiddle.
http://jsfiddle.net/6Kz7c/8/