I will eventually have a grid of embedded YouTube videos on a grid that are each initially covered by an overlay that will contain information about the relevant video. On hovering over the overlay, it slides away, leaving the video visible.
The problem is that once the overlay is out of sight, the hover is no longer in effect, so the overlay returns if you even twitch the mouse over the video. I'm bound to be missing something stupid, but I can't for the life of me figure out what it is.
Here's the CSS
.vid-wrap {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
height: 0;
overflow: hidden;
}
.vid-wrap iframe, .vid-wrap .vid-overlay {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.vid-wrap .vid-overlay {
z-index: 1;
background-color: green;
}
.vid-wrap .vid-overlay:hover {
top: -100%;
transition: all .5s;
}
You can just add this CSS to fix your issue
.vid-wrap:hover .vid-overlay{
top: -100%
}
This should fix your problem.
Related
I have a background image which works fine for the most part, however after changing the view to an iPhone 11 for example in Dev Tools, I noticed that the background stops after a certain point. I have included the CSS where the image is held below, can I add anything to fill the gap?
.app::before {
content: '';
background: url('./assets/backgroundImg.jpg') no-repeat center center/cover;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
I fixed this by adding overflow: hidden to my styling for all
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
}
I want to use a CSS transform to animate a video to display on a page, but I want the video to push the content down as it animates in, instead of the default situation where the space of the video already exists within the UI.
I created a jsfiddle to show what I mean here: https://jsfiddle.net/njpatten/198sh5ec/2/
I prefer to only transform the element for performance reasons, but I've tried modifying height as well to get the desired effect, but the result is a bit jumpy, and also not as performant as I'd like.
.video {
transform-origin: 0 0;
transform: scale(0, 0);
transition: 0.2s;
height: 0;
&.open {
transform: scale(1, 1);
height: 100%;
}
}
Is there a 'hack' that I'm missing that could solve this issue? How do animators deal with the element taking up space when trying to animate in an element while still keeping things performant (and therefore only animating transforms and opacity).
Thanks in advance!
Unfortunately, transform isn't going to cut it. It can't affect the layout of the document, which is what you're trying to achieve with pushing the text copy down. That said, I would approach this by first making the iframe container set its own dimensions based on an aspect ratio. Your video is at 560x315 which calculated as a percentage is 56.25% as tall as it is wide. The percentage is needed because it can be used with the "padding trick" to get an element that scales according to aspect ratio. So the first part is to make your video container based on aspect ratio:
.video {
position: relative;
max-width: 560px;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:after {
content: '';
display: block;
padding-top: 56.25%;
}
}
As you'll notice you can now set the width of .video and it will always have the right height for the video. Next we need to add the transition. We'll be transitioning the padding-top property.
.video {
position: relative;
max-width: 560px;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:after {
content: '';
display: block;
padding-top: 0%;
transition: padding 0.2s;
}
&.open:after {
padding-top: 56.25%;
}
}
Lastly, you can add a transition to your video so it scales up instead of opens like a shade:
.video {
position: relative;
max-width: 560px;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.2s;
transform-origin: 0 0;
transform: scale(0,0);
}
&:after {
content: '';
display: block;
padding-top: 0%;
transition: padding 0.2s;
}
&.open:after {
padding-top: 56.25%;
}
&.open iframe {
transform: scale(1,1);
}
}
The end result is similar but not exact to what you were wanting:
https://jsfiddle.net/jmarikle/kjd87was/
The white gap seems to be a popular issue. Yet I dont seem to be able to solve it with conventional solutions.
link to website https://bomengeduld.github.io/debadkamers/
link to style.css: https://github.com/bomengeduld/debadkamers/blob/master/style.css
(use inspector in mobile view) to detect the bug:
.mainmenu-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999999;
-webkit-transition: 0.3s;
transition: 0.3s;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px !important;
padding: 0px !important;
}
When I use the following it gets fixed, but then I loose the styling of menu bar.
overflow-x: hidden;
The following solved my problem
.container {
overflow: hidden;
}
I'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner - slider). Where could be a problem that caused this?
The CSS properties of the red DIV are:
html, body {
background-color: silver;
margin: 0;
padding: 0;
}
.red-div {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.red-div {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right:0; /* This is what you need */
}
That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll