We Keep Coding

Does transition work with backdrop-filter?

CSS transition is not working on backdrop-filter if I use overflow:hidden on parent element.
Example code:
.image-wrapper {
width: 200px;
border-radius: 6px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(0px);
transition-duration: .5s;
}
.image-wrapper:hover .overlay {
backdrop-filter: blur(15px);
}
.image-wrapper img {
max-width: 100%;
height: auto;
}
<h4>// overflow:hidden (transition not working)</h4>
<div class="image-wrapper" style="overflow: hidden">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
Example video: https://take.ms/fo80F

The real culprit seems to be the border-radius.
Sounds like a bug and I couldn't find one (though there are many related since this whole background-filter feature is still full of bugs both in the implementation and the specs), so you might want to report it directly to the ones that can do something about it.
Note that a workaround is to use a clip-path instead of this border-radius:
.image-wrapper {
width: 200px;
position: relative;
line-height: 0
}
.clip-me {
clip-path: inset(0px 0px round 6px 6px);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(0px);
transition-duration: .5s;
}
.image-wrapper:hover .overlay {
backdrop-filter: blur(15px);
}
.image-wrapper img {
max-width: 100%;
height: auto;
}
<h4>// overflow:hidden (transition working but overflow is now useless)</h4>
<div class="image-wrapper clip-me" style="overflow: hidden;">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>

For a couple of reasons I would suggest simplifying the code as shown below. I believe it does the same thing you want and is more cross-browser compatible -- as Firefox doesn't currently support backdrop-filter.
.image-wrapper {
width: 200px;
border-radius: 6px;
position: relative;
}
.image-wrapper img {
max-width: 100%;
height: auto;
filter: blur(0);
transition-duration: .5s;
}
.image-wrapper img:hover {
filter: blur(15px);
}
<h4>// overflow:hidden (transition is now working)</h4>
<div class="image-wrapper" style="overflow: hidden">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>

DIV height changes after inserting new HTML

I have setup a video header in my homepage. I have setup javascript to remove the DIV (id=remove) with the video (after it ends running) and replace it with an image and 2 buttons.
What happens is that the next DIV below the Video/Image DIV (id=videoheader) is pushed down as the DIV increases in height.
I think there is something wrong with the css that positions the 2 buttons, because running it without inserting the 2 buttons nothing happens and all stays in place as expected.
I have tried to position the button relative and absolute without result. I have tried to adjust margins to position the next div that it does not move.
thanks for the help, Erwin
<div id="videoheader">
<div id="show" class="page-video-containter">
<div id="remove">
<video id="myVideo" playsinline="" autoplay=""
muted="" class="page-media">
<source src="testvideo.mp4" type="video/mp4">
</video>
</div>
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
var el = document.getElementById ("remove");
el.remove();
document.getElementById("show").insertAdjacentHTML('beforeend',
'<img class="page-media" src="SL_STILLS_10.png"> <div
class="women"> <input type="button" class="button"
onclick="location.href=\'#\';" value="Women shop here" /> </div>
<br> <div class="men"> <input type="button" class="button"
onclick="location.href=\'#\';" value="Men shop here" /> </div>');
}
</script>
</div>
This is the CSS
.page-video-container {
position: relative; width: 100%; height: 100%;
}
.page-media {
position: relative; width: 100%; height: 100%; top: 0;
left: 0; right: 0; bottom: 0; background-size: cover; z-index: -1;
margin: 0;
}
#videoheader {
position: relative; margin: 0%;
}
.videotext {
color: white; margin: 0px; padding: 20px; position:
absolute; top: 2%; font-size: 2vw;
}
#videoheader .women .button {
margin-top: -1%; position: absolute;
top: 5%; left: 50%; transform: translate(-50%, -50%);
}
#videoheader .men .button {
margin-top: -1%; position: absolute; top:
10%; left: 50%; transform: translate(-50%, -50%);
}

Slider that increased center slide width. (Slider plugin suggestions)

I wanted to create slider when it slide center slide width must have incresed and the two slide next to it stay on normal slide.
I have tried one using slick slider.
Here is the code pen link that I have tried.(Click here)
But this is not smooth and the slide next to center slide not showing properly.
If anyone know some better slider for do exact kind of this please suggest me a link.
$('.slider').slick({
slidesToShow: 3,
centerMode: true,
centerPadding: "0px",
speed: 1000
});
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$(slick).next().css({
'margin-left':'auto'
});
});
html,
body {
background: #102131;
}
.slider {
width: 1140px;
margin: 20px auto;
text-align: center;
padding: 20px;
color: white;
}
.slider .slide {
padding: 0px;
}
.slider .slide .child-element {
transition: all .2s ease;
background: #0c1c79;
width: 100%;
height: 800px;
width: 300px;
}
.slider .slide .child-element .imgWrap img {
width: 100%;
max-width: 100%;
}
.slider .slide .child-element .desc {
display: none;
}
.slider .slide.slick-active:last-chid .child-element {
margin-left: auto;
}
.slider .slide.slick-center .child-element {
background: rebeccapurple;
-webkit-transform: translate(-70px, 0px);
transform: translate(-70px, 0px);
width: calc(100% + 140px);
max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
display: block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<div class="slider">
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/dark900x12001.jpg" alt="">
</div>
<div class="text">Title1</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/trans900x1200.jpg" alt="">
</div>
<div class="text">Title2</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/mi900x1200.jpg" alt="">
</div>
<div class="text">Title3</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/Venom900x1200.jpg" alt="">
</div>
<div class="text">Title4</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/alpha900x1200.jpg" alt="">
</div>
<div class="text">Title5</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
</div>

Please Try this css for child Element:-
html,
body {
background: #102131;
}
.slider {
width: 1240px;
margin: 20px auto;
text-align: center;
padding: 20px;
color: white;
}
.slider .slide {
padding: 0px;
}
.slider .slide .child-element {
transition: all .5s;
background: #0c1c79;
width: 100%;
height: 800px;
width: 300px;
transform-origin: top center;
margin: 0 auto;
}
.slider .slide .child-element .imgWrap img {
width: 100%;
max-width: 100%;
}
.slider .slide .child-element .desc {
display: none;
}
.slider .slide.slick-active:last-chid .child-element {
margin-left: auto;
}
.slider .slide.slick-center .child-element {
background: rebeccapurple;
transform: scale(1.68);
max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
display: block;
}

HTML: Show transparent cover on image and video

I am trying to show a transparent cover when I hover over a <picture /> or a <video />, and hide the cover again when the mouse leaves the image or the video.
Here is my code:
$(document).ready(function() {
$('.cspn-show-on-hover').hover(
function() {
$(this).find('.cspn-cover').css('display', 'table-cell');
},
function() {
$(this).find('.cspn-cover').css('display', 'none');
},
);
});
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<video class="cmedia-box" controls>
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
As you may notice, when you hover on the image, a transparent purple cover is shown. But when I used a <video /> instead of <picture />, the cover no longer appears !
Could anyone help me identify the reason ?

I think you are looking for something like this:
<html>
<head>
<style>
div{display:inline-block;}
img,video{height:200px;}
.cover:hover{background:#fff;opacity:0.15;}
</style>
</head>
<body>
<div class="cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
<div class="cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</body>
</html>

All you need is a wrapper:
.media-cover {
display: inline-block;
position: relative;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #6b478fb3;
opacity: 0;
}
.media-cover:hover:after {
opacity: 1;
}
<div class="media-cover">
your media object here...
</div>
Here's an example with the media objects centered in a full screen parent:
.media-cover {
position: relative;
display: inline-block;
}
.center-me {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 15%;
border-bottom: 1px solid #eee;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none; /*delete this line to disable interaction with video/picture */
background-color: #6b478fb3;
opacity: 0;
transition: opacity .2s linear; /*delete this line to disable fade effect */
}
.media-cover video, .media-cover picture, .media-cover img {
display: block;
max-width: 100%;
}
.media-cover:hover:after {
opacity: 1;
}
picture img {
max-width: 100%;
display: block;
}
body {margin: 0;}
<div class="center-me">
<div class="media-cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
</div>
<div class="center-me">
<div class="media-cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</div>

Video elements should be treated as images, where they can't have unrelated children elements. Also, you should be able to make the hover event by just using pure css like so:
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
I made it work how you might have intended here:
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<div class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<video controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>

How To Vertically Center Text Over Responsive Video

For some reason this is giving me heck and can't find a solid answer.
I have a video playing in the background that goes to full-width and is responsive to the screen size. I have a title/text over the video. But I cannot for the life of me figure out how to vertically center this text to the video in a responsive way! Thanks for any help!
Codepen:
http://codepen.io/149203/pen/VagPxe
html:
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div> <!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div> <!-- header-container -->
</body>
css:
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
text-align: center;
color: white;
}
pulling in this css:
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css

Display wrapper to display: table, change child element to display: table-cell, vertiacl-align: middle.
http://codepen.io/anon/pen/ZWwLPP

I found and forked this CodePen. This is the best solution I found. (Uses Bootstrap.)
http://codepen.io/149203/pen/JXxbEL
HTML
<div class="row">
<div class="col-xs-12 vert-center-container">
<video autoplay loop style="width:100%" class="img-responsive">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" />
</video>
<div class="vert-center-text">
<h1>Caption Text</h1>
</div>
</div>
</div>
CSS
.vert-center-text {
position: absolute;
top: 40%;
left: 0;
text-align: center;
width: 100%;
}
.vert-center-text h1 {
color: white;
}
.vert-center-container {
position:relative;
}

simulate the the header container as table and h3,h6 as table-cell with vertical-align:middle
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
display:table;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
display:table-cell;
vertical-align:middle;
text-align: center;
color: white;
}
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div>
<!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div>
<!-- header-container -->
</body>