Develop Reference

jQuery set `background-size` does not work

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>

Maintaining z-index order after rotated

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>

show link over the image when hovered [duplicate]

This question already has answers here:
How to display image over image on hover with css
(3 answers)
Closed 9 years ago.
I want to archive effect like in this site
when I hover over the image I want to show a link with bootstrap icon. I am using bootstrap 3.
original image
when hovered
How can I achieve this?

CSS
.main-block {
width:200px;
height:auto;
position:relative;
display:block;}
.main-block img{width:100%; }
.main-block .badge {width:29px;
height:55px;
background:url(images/badge.png) no-repeat 0 0;
position:absolute;
right:10px;
top:0;
display:none;}
.main-block .badge a {display:block;
height:55px;}
.main-block:hover .badge {display:block;}
HTML
<div class="main-block"><div class="badge"></div><img src="images/character-render.gif" width="400" height="300" alt="1" /> </div>

You can achieve that by using just html and css.
HTML:
<div class="img-wrap">
<img src="http://placekitten.com/240/310" />
<a class="show-on-hover" href="#"></a>
</div>
CSS:
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap img {
display: block;
}
.show-on-hover {
display: none;
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 0;
background: url('http://placekitten.com/20/30');
}
.img-wrap:hover .show-on-hover {
display: block;
}
Fiddle:
http://jsfiddle.net/HRb4L/

You can do this using CSS
HTML:
<img src="img_url" />
CSS:
a {
position: relative;
display: inline-block;
}
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* your background */
width: 20px; /* image width */
height: 100px; /* image height */
position: absolute;
top: 0;
right: 0;
}
SOURCE

Not the most efficient way, but yes, you can achieve it with something like this:
HTML:
<div class="thumbnail-parent">
<img class="thumbnail" src="http://placehold.it/200x200" />
<div class="badge"></div>
</div>
CSS:
.thumbnail-parent, .thumbnail {
width: 200px;
height: 200px;
position: relative;
display: inline-block;
}
.badge {
width: 20px;
height: 20px;
background-color: Black;
position: absolute;
top: 0px;
right: 0px;
visibility: hidden;
}
.thumbnail-parent:hover .badge {
visibility: visible;
}

3 column layout with header and footer in center column

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/

Pop up div shinks on browser resize

I have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this
Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/
and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/
Maybe you could view and check resizing the window
HTML
<div id="popup" >
<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>
</div>
<div id="fade" class="black_overlay"></div>
click here
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;
}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;
}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;
}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}
I want the poup to remain as it is, It should not shrink
Thanks in advance

Side scrolling for a popup is horrible, but:
make the popup position: absolute instead of fixed
give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
same for height?
make all max-width => width, because you know how much room you have
Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/
Highlights:
body {
min-width: calc(1200px + 10%);
}
.black_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#popup, #popup * {
box-sizing: border-box;
}
#popup {
position: absolute;
width: 1200px;
height: 600px;
padding: 0;
}

You are using percentage for your height and width.
The browser change its size on Resize, therefore the value of the percentage depreciates.
Like 10% of 100px differs from 10% of 10px.
Use px to keep your height and width the same size on resize.
Of course depending on what you want neither is better than the other