This is my div structure
<div id="outer">
<div class="inner">
<div>
<div class="item"></div>
</div>
<div class="itemBelow">
<div class="innerBelow"></div>
</div>
</div>
</div>
#outer{ /*parent and children - rotateable*/
top:10px;
width:220px;
height:50px;
position: absolute;
background:blue;
}
.inner{
top:35px;
width:200px;
height:75px;
position: relative;
background:green;
}
.item{
top:60px;
width:180px;
height:100px;
position: absolute;
z-index: 4; /*to be top most div*/
display: block;
background:red;
}
.itemBelow{
top:160px;
width:160px;
height:120px;
position: relative;
background:pink;
}
.innerBelow{
top: 105px;
width:140px;
height:140px;
position: relative;
display: block;
z-index: 1; /*to be lowest div*/
background:lime;
}
I'm trying to rotate #outer div and its children.
$('#btn').click(function(){
$('.outer').css({
'-webkit-transform': 'rotateZ(45deg)',
'-msTransform': 'rotateZ(45deg)',
'transform': 'rotateZ(45deg)',
});
});
But how can I maintain the z-index order after rotation? I expect the output to remain in the below z-index order before and after #outer is rotated.
item //top div
stillObj //second highest div
innerBelow //lowest div
I have created a mockup. See Fiddle
I have googled and come across many post like z-index and transform, transform-translate3d. But I'm unable to make this work.
You can use the css property transform-style to keep your 'stacking order' or z-index when using css3 3d transforms.
You can see in this fiddle, even when transformed, the element (.item) retained it's z-index value relative to the .stillObj.
You have to apply transform-style to both elements that need to retain their z-index and will also be 'interacting' with a 3d transform.
Here is an example of some of the types of structuring/class changes you'd have to make to your specific example in orderto keep the z-index values sticking: Fiddle.
It seems as if you need to put preserve-3d on the elements themselves (that will have a 3d transform), not their parents in order to preserve the stacking order.
$('#btn').click(function(){
$('.item').toggleClass('rotate');
});
.stillObj{
height: 450px;
width: 30px;
background: #666;
z-index:2;/*to be second height div*/
position: relative;
}
#outer{ /*parent and children - rotateable*/
top:10px;
width:220px;
height:50px;
position: absolute;
background:blue;
}
.inner{
top:35px;
width:200px;
height:75px;
position: relative;
background:green;
}
.item{
top:60px;
width:180px;
height:100px;
position: absolute;
z-index: 4; /*to be top most div*/
display: block;
background:red;
}
.itemBelow{
top:160px;
width:160px;
height:120px;
position: relative;
background:pink;
}
.innerBelow{
top: 105px;
width:140px;
height:140px;
position: relative;
display: block;
z-index: 1; /*to be lowest div*/
background:lime;
}
#btn{
margin-bottom: 50px;
float: right;
width: 200px;
height: 60px;
}
.rotate {
-webkit-transform: rotateZ(15deg);
transform: rotateZ(15deg);
}
.item, .stillObj {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="btn">Click</button>
<div class="stillObj"></div>
<div id="outer">
<div class="inner">
<div>
<div class="item"></div>
</div>
<div class="itemBelow">
<div class="innerBelow"></div>
</div>
</div>
</div>
Related
I got the following problem:
On click I am trying to animate the position, width and height of an absolute positioned div. Additionally I am trying to change the background-size through jQuery.
What happens is that it changes all the CSS properties correctly, but not background-size.
It's supposed to change background-size:100% auto to background-size:auto 100%. It just seems to ignore that.
Does anyone know why this problem occurs?
$(".item").click(function(){
$(this).animate({
'width': '94vw',
'height': '94vh',
'top': '3vh',
'left': '3vw',
'background-size': 'auto 100%'
}, 500);
$(".again").fadeIn();
});
$('.again').click(function() {
location.reload();
});
*{
margin:0;
padding:0;
}
.item{
background:#a0a0a0;
width:50%;
height:100px;
position: absolute;
top:0;
left:0;
cursor:pointer;
overflow:hidden;
background-image:url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}
.again{
display:none;
position:absolute;
bottom:20px;
width:100px;
left:calc(50% - 50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<button class="again">Again</button>
Why not use CSS transitions combined with a class instead of jQuery animate() ?
Here I use the class .big to toggle your CSS rules. I also added transition: all .5s; on your .item to enable transitions.
$(".item").click(function() {
$(this).toggleClass('big');
});
* {
margin: 0;
padding: 0;
}
.item {
background: #a0a0a0;
width: 50%;
height: 100px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
overflow: hidden;
background-image: url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
transition: all .5s;
}
.item.big {
width: 94vw;
height: 94vh;
top: 3vh;
left: 3vw;
background-size: auto 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
What I'm trying to achieve is on hover over the image, display the hover div over the image; I created this JsFiddle but I don't exactly know how to achieve what I'm trying to do.
.hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
}
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div class="hover"></div>
<div class="img">
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div id="hover"></div>
</div>
.img:hover #hover{
display:block;
}
#hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
position:absolute;
left:0;
top:0;
display:none;
}
Working fiddle
https://jsfiddle.net/kcdued0s/3/
Try like this
.hover:hover {
opacity:1;
}
I'd wrap it in a containing div(hoverwrap) that's relatively positioned.
It just needs the attribute, so the child element that are positioned absolute will take that as an anchor instead of the document.
Then set your width parameter on the wrapper, and have the child elements width 100% so it will always fill up the size of the wrapper.
Then have the image hide by default, and only show on hover.(done with the display:none value and display:inline-block
.hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
background-size: contain;
opacity: 0.7;
}
.hoverwrap {
position: relative;
}
.hoverwrap img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.hoverwrap .hover {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: none;
}
.hoverwrap:hover .hover {
display: inline-block;
}
<div class="hoverwrap" style="width:75px;height:75px">
<img src="http://i.imgur.com/QQzdPIF.jpg" />
<div class="hover"></div>
</div>
You can do this with CSS
<div>
<img ... />
<div class="hover"></div>
</div>
.hover{
...
display:none;
position:absolute;
top:0;
left:0;
}
img:hover .hover {
display:block;
}
Use position absolute for hover image
.hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
display: none;
position: absolute;
top : 0;
left: 0;
}
img:hover ~ .hover {
display:block;
}
I've recently begun to learn HTML, CSS, JavaScript, and jQuery from this set of books.
I've tried every obvious answer I could dig up on Stack Overflow to do what is normally the very simple task of centering a div on a page. My particular page has an overlay, which I suspect is part of my problem. I'm working to adapt a CodePen to my project. In this CodePen, only one element, an H1 tag, needs to be centered on a page and it works fine.
On my page, I'm replacing a h1 tag with a div. I've included a link to jsFiddle with comments re: what I've tried to do. I know I'm missing something really simple, but I'm unable to figure out what it is.
Thank you for reading and I welcome your suggestions for this front-end noob.
Below is my problematic code:
<!DOCTYPE html>
<body>
<header>
<div class="hero" id="Portfolio">
<div class="overlay"></div>
<div class="page-subject">
<!-- Rather than a vanilla h1 tag following the div.overlay, I wrapped the h1 tag in a div called div.page-subject. I can't get this div to center -->
<h1>Portfolio</h1>
<div class="container space-around">
<div><img src="../images/icons/apple-app-store-128.png" alt="iOS Applications"></div>
<div><img src="../images/icons/amazon-echo-128.png" alt="Amazon Alexa Skills"></div>
</div>
</div>
</div>
</header>
html, body {
height:100%;
padding:0;
margin:0;
font-family: Raleway,sans-serif;
color:#FFF;
}
header {
height: calc(100% - 65px);
background:#333;
-webkit-perspective: 1500px;
perspective: 1500px;
perspective-origin: center bottom;
}
h1 {
margin:0;
vertical-align: middle;
text-align:center;
font-size:80px;
font-weight:600;
text-transform:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.hero#Portfolio {
position:relative;
background:#333 url(https://wallpaperscraft.com/image/surface_gray_dark_light_shadow_18440_2560x1600.jpg) no-repeat center center;
background-size:cover;
height: 100%;
width:100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display:table;
}
.hero .overlay {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
opacity:0;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
div.page-subject {
vertical-align: middle;
}
.container {
display: flex;
}
.container.space-around {
z-index: 10;
justify-content: space-around;
padding-bottom: 10px;
}
a {
position: relative;
z-index: 1;
}
a.hvr-pop img {
background: white;
border-radius: 25px;
display: block;
min-width: 64px;
max-width:128px;
min-height: 64px;
max-height:128px;
width: auto;
height: auto;
}
/* Pop */
#-webkit-keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/*Does button animation from hover.css class*/
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
'use strict';
// This creates to folding animation
$(window).scroll(function() {
var heroHeight = $('header').height();
var yPosition = $(document).scrollTop();
if (yPosition <= heroHeight) {
var effectFactor = yPosition / heroHeight;
var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
$('.hero').css({
'-webkit-transform': 'rotateX('+rotation+'rad)',
'transform': 'rotateX('+rotation+'rad)',
})
.find('.overlay').css('opacity', effectFactor);
}
/**
* Sticky nav-bar
*/
if (yPosition <= heroHeight) {
$('nav').removeClass('fixed');
} else {
$('nav').addClass('fixed');
}
});
$(document).ready( function () {
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$("nav ul a.current").removeClass("current");
$("nav ul a[href='" + pathname + "']").addClass("current");
});
Just add this:
div.page-subject {
vertical-align: middle;
display: table-cell;
}
Here is Fiddle.
How about this.
Use div.page-subject instead of the tag and use
div.page-subject {
vertical-align: middle;
display: inline-block;
width: 100%;
text-align: center;
font-size: 1.2rem;
margin: 1rem 0;
}
Centering things horizontally is easy.
display: block;
margin: auto;
position: relative, absolute, or fixed depending...
Centering thing vertically takes more work and I always do it this way.
top: 50%;
transform: translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
However you can also do it all with transforms
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
If using transforms don't forget to use vendor prefixes.
I use this auto prefixer: http://pleeease.io/play/
Try this
.hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
to center a div horizontally try to use this one
/* lets say its width is 500px */
.hero{
width:500px;
display:block;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
}
if you wanted to make it center both vertically and horizontally then you must have to set its position to absolute like this one,
.hero {
width:500px;
height:500px;
position:absolute;
left:50%; /* centers horizontally on the screen */
top:50%; /* centers vertically on the screen */
background-repeat:no-repeat;
background-position:center;
margin:-250px 0 0 -250px; /* is width and height divided by two */
background:#FFFFFF;
}
You have to set overlay element as a parent of a .hero element and overlay element should be like this one,
.overlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:9999; /* makes sure it stays on top */}
What I am trying to achieve is a container with three inline divs that expand on the whole container when the mouse is hovered on them. One of the divs is floated to the right, one to the left, and one is centred. Here is a jsfiddle page so you can understand better what I am trying.
https://jsfiddle.net/hn59ooL5/
<div id="container">
<div id="container-left">
<div id="info-img-container" onmouseover="hoverOverLeft();" onmouseout="unHoverLeft();">
<img id="info-img" src="images/info.png" alt="info" name="info"/>
</div>
<div id="info-text-container">
Hover your mouse over this card to find info on how to use this website
</div>
</div>
<div id="container-right">
container right
</div>
<div id="container-center">
</div>
</div>
and the css:
#container{
margin: auto;
width: 85%;
height:55%;
display: block;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#container-left{
position: absolute;
background-color:#F8F8FF;
width: 33%;
height:100%;
display: inline-block;
float: left;
z-index:2;
transition: all 2s ease-in-out;
}
#container-left:hover{
width:100%;
z-index:999;
transition: all 2s ease-in-out;
}
#container-right{
position:absolute;
background-color:#6050DC;
width: 33%;
height:100%;
display: inline-block;
float: right;
z-index: 4;
right:0;
transition: all 2s ease-in-out;
}
#container-right:hover{
width:100%;
z-index:201;
transition: all 2s ease-in-out;
}
#container-center{
width: 33%;
height:100%;
display: inline-block;
position: absolute;
left: 33.5%;
z-index: 3;
background:url("../images/cloud.jpg") no-repeat;/*sets background pattern*/
background-size: cover;
}
#info-img-container{
float:left;
display: inline-block;
margin-left:0;
width:28%;
height:100%;
vertical-align: middle;
}
#info-text-container{
float: right;
display: inline-block;
font-size: 50px;
position:relative;
margin-right:0;
width:65%;
}
#info-img{
height: 100%;
width: 220px;
vertical-align: middle;
}
I am getting the two side divs to expand, the left one is expanding to the right and the right one to the left, but I do not know how to make the center one expand on both sides. Any ideas how can I do this with HTML/CSS/JavaScript?
Add the following css and you should get a fullscreen hover on the center div.
#container-center:hover {
width: 100%;
left: 0;
right: 0;
z-index: 5;
}
Don't forget to add the transition to #container-center if you want it to match the other hovers.
I am trying to make my page look like the Facebook Android app. The app can be summarized as having a 3 column layout with only the central column having the header (there is no footer, but in my requirement I also need a footer).
This can be shown in the image below
The red and blue div's are the left and right side-bars. The green and purple div's are the center div. The purple div's are the header and footer div's and would be sticking to the top and bottom of the page respectively.
One more requirement is there will be buttons on the header (top purple) to hide and show the left and right sidebars. Initially only the center div will be visible and the rest can be called into view as and when required. Here is my code till now. (I am not able to get the width for the center div)
HTML Code
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="leftBar" class="main">Left Bar</div>
<div id="content" class="inner">
<div id="header">Head</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>
CSS
body{
margin: 0px;
}
div.inner{
height: 500px;
width: 50%;
background: red;
}
div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}
#leftBar{
float: left;
}
#content{
position: relative;
height: 100%;
float: left;
}
#rightBar{
float: right;
}
#header{
position: fixed;
top: 0px;
background: blue;
}
#body{
margin-top: 40px;
position: relative;
}
#footer{
position: absolute;
bottom: 0px;
}
I have also added the JavaScript code in the fiddle linked below
http://jsfiddle.net/mv6Bj/1/
The width should be such that the center div is full 100% width of the screen and when the right/left toggles come into the picture they should come to their position and push the center div to the left or right respectively. This is as per the standard Facebook app functionality.
These are the issues I am getting right now
The center div is not 100% and neither does it scale as elements appear and disappear
The height of the center div is not 100% (it is on Chrome, but strangely it is not on JSFiddle)
When I click on left, the leftBar disappears and the content div moves to the left but the header div remains where it is.
As per my understanding, I have updated the fiddle.
Working Demo
I have used display:table propery. You can refer this or this
html, body {
margin: 0px;
min-height:100%;
height:100%;
}
#main {
min-height:100%;
display:table;
width:100%;
height:100%;
}
#leftBar, #rightBar {
background: lime;
width:100px;
display:table-cell;
}
#content {
min-height: 100%;
display:table-cell;
background: red;
}
#header {
background: blue;
height:10%;
}
#body {
min-height:80%;
overflow:hidden;
}
#footer {
background: magenta;
height:10%;
}
Hope this works for you.
you can checkout this fiddle i made some changes in your css accordingly.
body {
margin: 0px;
}
div.inner {
height: 500px;
width: 50%;
background: red;
}
div.main {
background: lime;
bottom:0px;
top:0px;
overflow: hidden;
position: absolute;
width:20%;
}
#leftBar {
float: left;
}
#content {
position: absolute;
height: 100%;
top:0px;
right:0px;
width:60%;
left:20%;
float:left;
}
#rightBar {
float: right;
width:20%;
background: lime;
top:0px;
bottom:0px;
left:80%;
position:absolute;
}
#header {
float: left;
position: fixed;
top: 0px;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
#body {
margin-top: 40px;
position: relative;
}
#footer {
position: absolute;
bottom: 0px;
position: fixed;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
http://jsfiddle.net/mv6Bj/3/