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.
Related
I'm trying to mantain the 16:9 ratio when I insert responsive iframes inside a flexbox.
.video-media-youtube-inner {
display: flex;
flex-wrap: wrap;
}
div[class^="video-media-youtube-inner-vi"] {
flex: 0 0 50%;
overflow: hidden;
position: relative;
padding-bottom: 56.25%;
height: 0;
}
div[class^="video-media-youtube-inner-vi"] iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-media-youtube">
<div class="video-media-youtube-inner">
<div class="video-media-youtube-inner-vi01">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
<div class="video-media-youtube-inner-vi02">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
<div class="video-media-youtube-inner-vi03">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
</div>
But, as you can see from the snippet, the iframe width is shrinked correctly but the height remain always the same. Is it possible to mantain the 16:9 ratio in flexbox items?
Try adding an extra <div> around the <iframe>s:
.video-media-youtube-inner {
display: flex;
flex-wrap: wrap;
}
div[class^="video-media-youtube-inner-vi"] {
flex: 0 0 50%;
}
div[class^="video-media-youtube-inner-vi"] .sixteen-by-nine {
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 56.25%;
height: 0;
}
div[class^="video-media-youtube-inner-vi"] iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-media-youtube">
<div class="video-media-youtube-inner">
<div class="video-media-youtube-inner-vi01">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
<div class="video-media-youtube-inner-vi02">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
<div class="video-media-youtube-inner-vi03">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
</div>
</div>
On another note - Perhaps you are using a convention I'm not familiar with, but I think it would be more standard and also more maintainable to just use a consistent class like video-media-youtube-inner for your inner <div>s and then assign them unique ids (vi01, vi02, vi03). That way, you could just access them via .video-media-youtube-inner in your CSS, or #vi01 if you need to target a specific one.
As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>
Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this
I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.
I have a problem with slider controls and any block with position: absolute on slider section.
$(document).ready(function() {
$('#fullpage').fullpage();
});
.slide {
text-align: center
}
.section {
text-align: center;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
text-align: center;
background: red;
z-index: 2;
}
.slide1 {
background: #cccccc;
}
.slide2 {
background: #C3C3C3;
}
.section2 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.fullpage/2.5.0/jquery.fullPage.min.css" />
<div id="fullpage">
<div class="section section1">
<div class="absolute">position: absolute</div>
<div class="slide slide1"> Slide 1 </div>
<div class="slide slide2"> Slide 2 </div>
</div>
<div class="section section2">Some section</div>
</div>
If you slide down and up - everything is ok. But if you use slider and then will slide down and up. The page will show without slider controls(and absolute block).
I can't find why it is happening. Problems occurs only in Chrome and Opera.
UPDATES:
Here is jsfiddle for example: https://jsfiddle.net/nfL5w9yL/1/
Fullpage adds z-index:1 to fp-slides
Had the same issue recently, i don't know if you found a solution, but my solution was to remove z-index from fp-slides!
the weird part is that in my case the navigation buttons were not affected, only my position absolute div
I have four images that should be aligned like so:
____________
|1 |4 |
|_____| |
|2 |3 | |
|__|__|______|
They need to have no space between them, are 100% of the viewport's width, and, here's the kicker, they need to be responsive.
So my question is, what are best practices to do something seemingly simple like this? Use img tags and size the images exactly (before upload)? Use background images and size them with CSS, then resize them on page resize with JS? Some other way?
I should say that I'm using Boostrap 3 with rows and columns to do this, but wasn't able to make the column heights a percentage height.
Thanks!!
One option is to create a responsive wrapper, set the wrapper to be relatively positioned, and then absolutely position the children of the wrapper.
I just tested this and it worked great. I set my body to 100% height and width, and then the wrapper to 50% of that. On browser resize, the wrapper shrinks, and so do the images, all while maintaining their aspect ratio and positioning in the group.
CSS:
.wrapper {
position: relative;
padding-bottom: 50%;
width: 50%;
}
.one, .two, .three, .four {
position: absolute;
}
.one {
width: 50%;
left: 0;
top: 0;
}
.two {
width: 25%;
bottom: 0;
left: 0;
}
.three {
width: 25%;
bottom: 0;
left: 25%;
}
.four {
width: 50%;
bottom: 0;
right: 0;
top: 0;
}
HTML:
<div class="wrapper">
<img src="../images/one.jpg" class="one">
<img src="../images/two.jpg" class="two">
<img src="../images/three.jpg" class="three">
<img src="../images/four.jpg" class="four">
</div>
You could use the Bootstrap grid modified with CSS and make sure natural widths and heights of the images add up correctly:
DEMO: https://jsbin.com/caramo
HTML
<div class="container">
<h2>Flush Grid</h2>
<div class="row flush-grid">
<div class="col-sm-6">
<img src="http://lorempixel.com/600/400/fashion" alt="">
<div class="row flush-grid">
<div class="col-xs-6"><img src="http://lorempixel.com/300/400/food" alt="" ></div>
<div class="col-xs-6"><img src="http://lorempixel.com/300/400/city" alt="" ></div>
</div>
</div>
<div class="col-sm-6 row">
<div class="col-xs-12">
<img src="http://lorempixel.com/600/800/city" alt="" >
</div>
</div>
<!--/.row.flush-grid -->
</div>
<!--/.container-->
CSS
/* Flush Grid */
.row.flush-grid img {
width: 100%;
height: auto;
float:left;
}
.row.flush-grid {
margin-left: 0;
margin-right: 0;
}
.row.flush-grid [class*="col-"] { padding:0;}
.row.flush-grid [class*="col-"].row { padding:0;margin:0;}
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;