Develop Reference

An expandable div?

I want to create a div where one of the children is visible and one is out of the div, I've been using overflow:hidden for this, however whatever i try i can't seem to get this to work, I've tried positioning one absolute and that works, but as soon as I extend the div to reveal the extention it will overlap it obviously. Any help would be great, here are some pictures of the main concept.
Before Being Clicked
After Being Clicked
note: I am using react js to develop this, if you could make a codepen or something in vanilla javscript just as a concept of the main functionality and then I will convert it to react.
Thanks in advance :)

Here is one way:
.expandable {
position: relative;
}
.expandable>div {
width: 200px;
transition: all 1s;
overflow: hidden;
background-image: url('https://via.placeholder.com/200');
background-repeat: no-repeat;
min-height: 200px;
border: 1px solid black;
}
.expandable>div>img {
position: absolute;
width: 200px;
}
.expandable>input { display: none; }
.expandable>label {
position: absolute;
top: 90px;
left: 210px;
transition: all 1s;
background-image: url('https://img.icons8.com/flat_round/64/000000/arrow--v1.png');
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
transform: rotate(0deg);
}
.expandable>input:checked+label {
left: 410px;
transform: rotate(180deg);
}
.expandable>input:checked~div {
width: 400px;
}
.expandable>div>div {
width: 200px;
padding-left: 200px;
}
<div class="expandable">
<input type=checkbox id='ex1'>
<label for='ex1'></label>
<div>
<div>
<!-- right side content -->
<h1>Stuff here</h1>
<p>lorem ipsum</p>
</div>
</div>
</div>
This uses the label as the button. When clicked, it triggers the input to be checked/unchecked. We then use the status of the checkbox to change our CSS, and we use transitions so that it is smooth, works across all modern browsers, and is very battery efficient for mobile devices.

Skrollr Background Animation Won't Swap

Hi guys I was trying to swap the background of two images down the footer section of my website using skrollr.js (https://github.com/Prinzhorn/skrollr). For some reason it won't scroll at all. I am trying to create a parallax site that has fixed position on the part below.
See image: http://prntscr.com/6yrckx
Here's the Markup of that part:
<div id="starynight"
data-bottom-top="opacity: 1; background: !url(images/sunny.jpg); background-size: cover;"
data--40-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--50-top="opacity: 0; background: !url(images/night.jpg); background-size: cover;"
data--60-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--70-top="opacity: 1; background: !url(images/night.jpg); background-size: cover;"
>
</div>
While here's the CSS:
#starynight{
background: url('../images/sunny.jpg') no-repeat center;
width: 100%;
height: 307px;
background-size: cover;
}
#road{
background: url('../images/road.jpg') no-repeat center;
width: 100%;
height: 145px;
background-size:cover;
}
#car{
background: url('../images/car.png') no-repeat center;
width: 325px;
height: 125px;
display: block;
position: absolute;
z-index: 9999;
left: 950px;
top: 2100px;
}
My issue here is that when I scroll this part of my website it should swap the images of the sunny.jpg and night.jpg while the car is moving from right to left and also this background image must be fixed in position. For some reason my codes won't just work. Any idea what went wrong?
See my website here: http://goo.gl/aNOCiJ

Animating backgrounds is not like animating positions or "number" data. You can't just transform one background into another by fading them (actually Firefox somehow can animate the transition, but lets not depend on that).
A solution to your problem is having 2 diferent divs for, 1 for your night scene, and other for your sunny sky just in the same position, one over the other and with the sunny one with a higher z-index.
Then what you need to animate on scroll is the opacity of the sunny sky, what makes the night scene appear.
Also I found that your level of scroll isn't enough to fade the opacity of the sunny sky completly, it ends in 0.603448.
Hope it helps, please tell me if this worked.

As stated already, background images can't be animated, only background colors. So you'll have to lay both images on top of each other and fade the top layer in like this -
*Untested
#starynight-wrap {
position: relative;
width: 100%; height: 307px;
}
#starynight-day {
position: relative;
width: 100%; height: 100%;
background: url('images/sunny.jpg');
background-size: cover;
}
#starynight-night {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: url('images/night.jpg');
background-size: cover;
}
<div id="starynight-wrap">
<div id="starynight-day"></div>
<div id="starynight-night"
data-bottom-top="opacity: 0"
data--50-top="opacity: 0;"
data--60-top="opacity: 0.5;"
data--70-top="opacity: 1;"
>
</div>
</div>

Full screen image with image placed in the html

I'm trying to centre an image, i've attached a jsfiddle to show the outcome of what I want, the only difference would be that the image is placed into the html and not the css code.
http://jsfiddle.net/6y2qjxm0/3/
Here's the css I'm using in the fiddle and i've already taken the image url out.
width:100%;
height:100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
and finally here's the html:
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
Failing this, does anyone know a better way of doing this?
It must be centred and it must be 100% width and 100% height.
Thanks
UPDATE: The image must stay in proportion like the fiddle.

UPDATED This solution is independent of the image dimensions, apart from that it needs its with to be greater than its height. It uses CSS positioning to set the image within .full-screen to be of full height, keep proportions and with a 50% negative horizontal offset (centered).
HTML:
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS:
body, html {
margin: 0;
height: 100%;
overflow-x: hidden;
}
.full-screen {
position: relative;
height: 100%;
}
.full-screen img {
position: absolute;
left: 0;
height: 100%;
left: -50%;
}
Updated fiddle: http://jsfiddle.net/5e6btwa2/1/

background-size: cover; is your best bet, with support from ie9+. Getting an img to cover the page without distorting only works if you know its size or are willing to use javascript.
Why do you need to use an img? Is it because you want the src to be added dynamically? in that case you should use an inline style.
<div style="background-image:{{dynamicImage}}"></div>

Try use attribute align with value middle in your img tag
<img src="smth.gif" align="middle">

If you want the same behavior as you had with the image as a background, you could do it like this (depends on the CSS3 transform method):
http://jsfiddle.net/6y2qjxm0/6/
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
CSS
* {
margin:0;
padding:0;
position: relative;
}
html {
width: 100%;
height: 100%;
background-size: cover;
position: relative;
overflow-y: scroll;
}
body {
width: 100%;
height: 100%;
margin-left:auto;
margin-right:auto;
background: inherit;
/* overflow: hidden; enable to disable scrolling */
}
.full-screen {
width:100%;
height:100%;
overflow: hidden;
}
.full-screen img {
min-width: 100%;
min-height: 100%;
left: 50%;
transform: translate(-50%,0);
}

Try this, it works in IE8+ and pretty much every other browser:
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS
.full-screen {
position: fixed;
top: -50%; /* this will center the image vertically */
left: -50%; /* this will center the image horizontally*/
width: 200%;
height: 200%;
}
.full-screen img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Demo
For other ways have a look at this article on CSS tricks by Chris Coyier. The CSS above is used in Technique #2 in his examples.

Make image fill div completely without stretching

I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
http://jsfiddle.net/HsE6H/
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
Not sure why I can't get it to work, do I need JavaScript for this?
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)

Auto-sizing Images to Fit a Div - Making the CSS Work
Here is one way of doing it, start with the following HTML:
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
jQuery Helper
You can use the following jQuery action to determine which class to set based
on the aspect ratio of the image.
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<height and then set the appropriate class.
Also, I added a check to take into account the aspect ratio of the containing block.
Before, I had implicitly assumed a square view panel.

For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.

Taking out the line: max-width:100% in your CSS file seems to do the trick.
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/

Here is another solution I found, that no need to seperate portraid or landscape or scripting.
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
https://jsfiddle.net/efirat/17bopn2q/2/

Background can do this
set image as background
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

You should try this:
img {
min-width:100%;
min-height:100%;
}

I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
https://github.com/johnpolacek/imagefill.js/

It works if you add the following to the parent div for img styling;
https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}

This could do the job:
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}

We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.
Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:
.container {
margin: 10px;
width: 125px;
height: 125px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
The key is in using line-height and setting the container to do the same.

I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}
Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.

Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!

The following solution is very short and clean if you need to insert img tag into div tag:
.container, .container img
{
max-height: 300px;
max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>
Also, if you don't need to use a div you can just write an even shorter css:
img
{
max-height: 300px;
max-width: 240px;
}

Vertically centered absolute position div inside relative position parent - Works in Chrome, but centers to body in Safari etc?

I am trying to vertically center some text over an image that appears on a mouseover. I have come to a solution that works with chrome (15.0.874.106) on a mac (10.7.2), but it seems to have issues in Safari (5.1.1), odd since they are both webkit based. I believe it also has the same problem in Firefox.
The text is vertically centered in relation to the parent div in chrome, but seems to center to the body or window in Safari. Am I doing something wrong or does anyone have a better solution?
jsbin: http://jsbin.com/iceroq
CSS:
.content {
width: 300px;
position: relative;
}
.content-text {
width: 100%;
height: 100%;
background: black;
position: absolute;
top: 0;
left: 0;
text-align: center;
display: none;
}
HTML:
<div class="content">
<div class="content-image">
<img src="http://placehold.it/300x500/E01B4C" />
</div>
<div class="content-text">
Google
</div>
</div>
.content-text a {
color: white;
position: relative;
top: 50%;
margin-top: -0.5em;
}
JS:
$(document).ready(function() {
$('.content').hover(
function() {
$(this).children('.content-text').show();
}, function() {
$(this).children('.content-text').hide();
});
});

I edited your jsbin: http://jsbin.com/iceroq/3
The edits were all CSS changes to .content-text a. Making the link absolutely positioned and giving it a height allows you to know what margin-top to give it (half of the height).
.content-text a {
display: block;
width: 100%;
height: 20px;
position: absolute;
top: 50%;
margin-top: -10px;
color: white;
}