Develop Reference

Z-Index is changed during transition

In the background of my slider, an image with negative z-index is placed. That way, the image can contain alt-text and have the effect of a fixed background-image.
At first glance, this works fine, but during the transition to the new slide, the z-index of the background-image seems to be overwritten and is displayed on top of everything else. How can I solve this?
const banner = document.getElementsByClassName("banner");
let activebanner = 0;
setInterval(changebanner, 8000);
function changebanner() {
banner[activebanner].classList.remove("active");
activebanner++;
if (activebanner === banner.length) {
activebanner = 0;
}
banner[activebanner].classList.add("active");
}
.slider {
width: 100%;
position: relative;
height: 600px;
}
.banner {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition-duration: 1s;
}
.banner.active {
visibility: visible;
opacity: 1;
}
.banner-image {
position: fixed;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 620px;
z-index: -2;
}
.image-credits {
position: absolute;
bottom: 0;
right: 0;
}
<div class="slider">
<div class="banner active">
<img class="banner-image" src="path-to/image.jpg" alt="A background-image.">
<div class="content">
<h1>A clever Tagline</h1>
</div>
</div>
<div class="banner">
<img class="banner-image" src="path-to/image.jpg" alt="A background-image.">
<div class="content">
<h1>A clever Tagline</h1>
<p class="image-credits">Image by Photographer</p>
</div>
</div>
<div class="banner">
<img class="banner-image" src="path-to/image.jpg" alt="A background-image.">
<div class="content">
<h1>A clever Tagline</h1>
</div>
</div>
</div>
I set the overflow state of the whole slider and of the banner to hidden. That did not work. Another solution was to give the whole slider a negative z-index. But then, the link on the image-credit isn't clickable anymore, because the slider is behind the website body. Searching online for this specific problem did not get me any useful results. I only find solutions and other questions about how to animate the z-index.

Set width of child div in flex container

I have 4 divs with the class .piece-slide that horizontally scroll across the page within the the div #work, which is a flex element. Within the third .piece-slide div the 3 nested elements are absolutely positioned, this renders the width of the third .piece-slide div to 0, so now I want to programmatically set the width of the third .piece-slide div so that it covers the 3 nested elements.
For some reason I am unable to set this width through CSS. I have also tried through jQuery. It would be much appreciated if some pointed me in the right direction as how to rectify this. Here is a jsfiddle as well as the embedded code below.
$("#third-div").outerWidth("100vw");
#wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
#work {
height: 100%;
overflow-x: scroll;
display: flex;
background-color: red;
}
.piece-slide {
display: flex;
align-items: center;
position: relative;
padding-right: 5em;
box-sizing: border-box;
border-right: 1px solid black;
}
.piece {
width: 25vw;
margin: 10px;
}
.piece img {
max-width: 100%;
}
#third-div {
/* D0ES NOT WORK */
width: 100vw;
background-color: green;
}
#third-div a {
position: absolute;
}
#third-div a:nth-child(1) {
top: 0;
left: 0;
}
#third-div a:nth-child(2) {
top: 25vw;
left: 25vw;
}
#third-div a:nth-child(3) {
left: 60vw;
}
<div id="wrapper">
<div class="content">
<div id="work">
<div class="piece-slide">
<a class="piece">
<img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
</a>
</div>
<div class="piece-slide">
<a class="piece">
<img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
</a>
<a class="piece">
<img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
</a>
</div>
<!-- THIRD DIV WHERE WIDTH SHOULD BE SET -->
<div id="third-div" class="piece-slide">
<a class="piece" num="1">
Nested Element 1<img src="http://i.stack.imgur.com/yZlqh.png">
</a>
<a class="piece" num="2">
Nested Element 2<img src="http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif">
</a>
<a class="piece" num="3">
Nested Element 3<img src="http://suplugins.com/podium/images/placeholder-02.jpg">
</a>
</div>
<div class="piece-slide">
<a class="piece">
<img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Try to remove
flex-direction: column;
from #wrapper.
Or change it to
flex-direction: row;

Resize iframe without aspect ratio

I am trying to create a responsive iframe that will get a map, but when I resize the browser, it resizes using the aspect ratio, and I would like him to remain filling the entire space. As in this example: http://dev.fhmp.net/tailorfit/demo/, in the case where the overflow is crop.
Today it looks like this:
.iframe-rwd {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section id="container">
{% include "main/header.html" %}
{% include "main/sidebar.html" %}
<section id="main-content">
<section style="padding-right: 0px;padding-left: 0px;" class="wrapper">
<div class="iframe-rwd">
<iframe
name="main-content"
src=""></iframe>
</div>
</section>
</section>
</section>

In the past i've just set the iframe width to 100%, if you have the iframe in a responsive container than it will always take that width and retain whatever height you set the iframe to.

This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.
HTML
<div class="iframe-rwd">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071&output=embed"></iframe><br /><small>View Larger Map</small>
</div>
css
.iframe-rwd {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Responsive Equal height div without specifying the height

I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>

You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.

I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}

Align vertically images hover img

I have a grid of images with same width but with diferent height.
On hover the image i want to display two differnt links to get info of the image and the author.
The problem is i can't vertical aling the links over the image :/
HTML:
<div class="item">
<div class="img-work">
<img src="img/grid1.jpg" alt="" class="img-grid">
<a href="#" class="zoom"">
<img src="img/hover-item.png" alt="">
</a>
<a href="#" class="info">
<img src="img/hover-info.png" alt="">
</a>
</div>
</div>
CSS:
div.img-work a.zoom {
left: 31%;
position: absolute;
top: 27%;
visibility: hidden;
width: 38px;
}
div.img-work a.info {
left: 50%;
position: absolute;
top: 27%;
visibility: hidden;
width: 39px;
}
jQuery:
$('div.img-work').hover(function() {
$(this).children('a').css('visibility', 'visible');
$(this).children('img').css('opacity', '0.5');
}, function() {
$(this).children('a').css('visibility', 'hidden');
$(this).children('img').css('opacity', '1');
});
As you can't see i don't how to align those link vertically . Any hints would be appreciate. Thank you in advance

Here's a CSS solution: http://jsfiddle.net/08vorn1s/.
The images are vertically and horizontally centered within their container. You can easily adjust the code if the images need to be bottom-aligned.
HTML:
<div class = "grid">
<div class = "row">
<div class = "cell">
<img src = "http://placehold.it/150x150 " />
<div class = "links">
Info
Author
</div>
</div>
<div class = "cell">
<img src = "http://placehold.it/150x170 " />
<div class = "links">
Info
Author
</div>
</div>
<div class = "cell">
<img src = "http://placehold.it/150x200 " />
<div class = "links">
Info
Author
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.grid {
display: table;
width: 100%;
}
.grid .row {
display: table-row;
}
.grid .row .cell {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell > .links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: none;
}
.cell:hover > img {
opacity: 0.5;
}
.cell:hover > .links {
display: block;
}

Have you tried setting your property like so position: relative? You might also want to adjust your left and top CSS properties based on image size.

Your .item element needs to have a position: relative; and your overlay element (.info) needs to have:
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
display: block;