I would like to know how to move the close button in lightbox 2 to the top?
.lb-data .lb-close{display:block;
float:right;
width:30px;
height:30px;
background:url(../images/close.png) top right no-repeat;
text-align:right;
outline:0;
filter:alpha(Opacity=70);
opacity:.7;
-webkit-transition:opacity .2s;
-moz-transition:opacity .2s;
-o-transition:opacity .2s;transition:opacity .2s}
add this code to your css:
.lb-data .lb-close {
position: absolute;
top: -50px;
margin-right: -50px;
}
you should play with the pixel sizes to locate it exactlly where you want.
Related
I'm using mux-player-react on a next.js site to implement a large background looped movie.
https://website-agobay-coming-soon-5iemrgd6o-hhag.vercel.app/
The video should be object-fit: cover to cover all the browser window. unfortunately it doesn't work.
eather with:
.videoMob {
--controls: none;
--media-object-fit: cover;
--media-object-position: center;
or:
.videoMob {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
object-fit: cover;
It's strange, if I use the mux-video-react class, it works fine but the video has a jumpcut and it don't show the video on mobile devices.
thanks
object-fit seems to be working but the video doesn't take up all the vertical space of its parent element. If you can use height: 100vh on the video tag, it should work.
On another note - for a background video like this, native HTML5 video does the job as well ...
You can modify your videoMob class styles to look like this, it should solve your issue:
.videoMob {
position: absolute;
inset: 0;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
object-fit: cover;
}
Let me know if you have any other questions around using mux-player!
I want to use a dialog with an icon at the top such as this:
This is currently what I am getting:
Set the container overflow css property to visible
.popupContainer {
overflow: visible;
}
Or make the icon's position absolute and give it a proper z-index
.popupContainer {
position: relative;
}
.icon {
position: absolute;
margin-left: auto;
margin-right: auto;
z-index: 100;
}
Following link is affected: https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=2753787&tc_deviceCategory=undefined&template_layout_id=5699672553&updated=1523614982274
We are experiencing problems with a form and its parent div. We tried to bring in a frosted glas style to the parent div landingboxForm, but if we are working with pseudoelements, nothing happens.
The tutorial is from here https://medium.com/#AmJustSam/how-to-do-css-only-frosted-glass-effect-e2666bafab91 and is working well for others. I just do not succeed in port it for our landing page.
Does anybody know why the :before div tag is just grey in the Chrome inspector and why it does not appear?
CSS:
.lp-sorba {
background-size: cover;
position: absolute;
width: 100%;
top: 0;
left: 0;
bottom: 0;
height: 900px !important;
}
.lp-sorba .landingpageHeader {
height: 80px;
background: #1d89d2;
}
.lp-sorba #hs-link-logo > img {
margin-top: 22px;
}
.lp-sorba .landingboxForm:before {
content:" ";
background: inherit;
left: 0;
right: 0;
top: 0;
height: 100%;
width: 100%;
bottom: 0;
box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
filter: blur(10px) !important;
}
.lp-sorba .landingboxForm {
background: inherit;
width: 100%;
height: 100%;
position: relative;
border-radius: 5px;
box-shadow: 0 23px 40px rgba(0,0,0,0.2);
padding: 20px;
border: 0.5px solid #edebeb;
}
As for your question
why the :before div tag is just grey in the Chrome inspector and why it does not appear?
Your pseudo element is collapsing right know. Add position: absolute; to the .lp-sorba .landingboxForm:before rule.
But that won't solve your underlying problem / won't create the frosted glass effect.
The way how filters work is: they get applied to the element itself only, not the ones lying behind it.
In the example from Medium/Codepen, the form element inherits the background from the main element. By that it's pseudo element may apply a filter to it.
In your setup, the form is positioned absolute, while the image tag is also positioned absolute. The forms filter won't bleed into that image tag.
Revisit the example:
apply a background image to a parent container
inherit that in the form
pseudo filter on the form will blur the forms inherited background
I am trying to make a border/frame around a full screen background picture.
I could make it using border but I could not create a space between the edge and the frame. https://s3.amazonaws.com/uploads.hipchat.com/44798/299518/TieMyM2f0EXsUsK/frame.png
Also the second thing is to create a hole on the bottom side of the pic.
If you guys have any advises, I would really appreciate.
Thanks for you help,
Richard
I cannot help you about the hole but you can set padding and magrin with css to your image to create the space between the end of image and the border and the screen.
I'm not sure if thats what you mean, but maybe try something like this (tested on chrome)
<div id="cont">
<div id="break"></div>
</div>
#cont {
border: 1px solid red;
width: 90%;
height: 300px;
}
#break {
position: relative;
margin: 0 auto;
top: 100%;
bottom: 1px;
width: 100px;
height: 1px;
background-color: white;
}
http://jsfiddle.net/2bph38qh/
I have a problem with a CSS grid I built. The relevant site is this: http://dr-brauchle.de/
The wall of photos underneath the content is constructed with a grid of floated boxes. This works fine as long as all the boxes have fixed width and height values.
To make the site responsive I use percentages on the width of the boxes and "auto" on their height and the same applies to the images that are loaded into these boxes. The media query jumps in at 1199px and converts the static box sizes to fluid box sizes.
This produces problems at certain resolutions where the second large image box jumps from the left margin of the page to the right and thus destroys the order of the grid. Making the browser window bigger makes the box jump in to place again. This is very annoying since the resolution on an iPad 3 for example produces this error as well.
On the boxes (sse code below) I had to use a "line-height: 0" to eliminate gaps of a few pixel between the boxes. This seems to be part of the strange float-problem.
.box-1 {
width: 25% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
.box-2 {
width: 50% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
Thanks a lot for ANY help!
Arne
So what I found is that you need to force an aspect ratio.
Try modifying the following styles:
.box-1 {
width: 25% !important;
height: 0;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
position: relative;
padding: 13.75% 0 0 0;
}
.box-1 img {
width: 100% !important;
height: auto !important;
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Basically the modification above set up the box-1 to have a fixed aspect ratio then positionsw the img in in absolutely. To calculate the 13.75%, I took one of your images and got 165/300=.55 --> .55*.25=.1375 --> 13.75%
Hope this solves your issue.
Reference