I have a div with a background image. The div itself contains nothing except this code:
<div class="container" style="background-image: url(URL);"></div>
and the CSS code:
.container {
width: 100%;
overflow: hidden;
margin-bottom: 0px;
background-position-x: 50%;
background-position-y: 50%;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: local;
background-size: cover;
display: block;
position: relative;
background-color: #FFFFFF;
padding-top: 50%;
}
When trying to detect the height with:
var container_height = $('.container').height();
it returns 0 even though in reality it's approximately 200px in height.
I am assuming this is because the container has no content, only a background image with top padding. How do I fix it so I an get the actual height?
var container_height = $('.container').outerHeight();
Consider using outerHeight() instead :)
I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner
I have done this in CSS using transform: skewY( x amount deg);
I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so
var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;
and I can do this via javascript every time the page is resized,
but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.
.homeleftside::after {
transform-origin: top left;
transform: skewY(-29deg);
content: '';
height: 100%;
width: 100%;
background: url("graphics/architecture.jpg");
color: #fff;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
}
.homeleftside {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: top left;
transform: skewY(29deg);
}
As far as I know, your only posibility is with a mask-image.
Support is not fully, but it gives an easy way to achieve it.
Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element
.test {
background-image: linear-gradient(red, green);
-webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}
#test1 {
width: 300px;
height: 200px;
}
#test2 {
width: 200px;
height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You can easily achieve this using clip-path
body {
margin:0;
height:100vh;
background:url(https://picsum.photos/id/10/800/800) center/cover;
}
body:before {
content:"";
display:block;
height:100%;
background:url(https://picsum.photos/id/18/800/800) center/cover;
-webkit-clip-path:polygon(0 0,0 100%,100% 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}
I have revolution slider installed on my WordPress. The aim is to put a dark overlay with opacity=0.3 over the slides... I`ve tried to make overlay .div with absolute position, but it covered all slider including its control elements like "next slide", "previous slide" and others.
So, i need to put this overlay just between slide image and slider controls. I`ve found code with image
<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>
Then i wrote this
$('.tp-bgimg').before('<div class="slider-area-overlay"></div>');
Nothing change. I dont know why.
Next step: lets do it via css.
.tp-bgimg { position: relative; }
.tp-bgimg:before {
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: "";
}
Its cool, but slide image appears with no changes, and then, after 1-2 sreconds appear my css styles.
I really have no idea how to decide this problem, please help me.
The Slider Revolution FAQ offers 3 solutions to this:
Option 1) Enable their built-in overlay
This can be found in the slider appearance settings, sidebar. You'll want to change the "Dotted Overlay Size" option:
Option 2) Add one of the following CSS blocks to the "Custom CSS" for your slide
I personally added it to the Global Slider CSS, so it affected all my slides.
If your individual slides have captions:
.rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
If your individual slides do not have captions:
.rev_slider:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 99;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
Option 3) Use image editing software, e.g. Adobe Photoshop, to manually apply a dark overlay to your images, then use the darkened images as the slide background.
The simplest approach is to add a layer above your image, paint it black, and then reduce the transparency of the black layer to around 50%.
The solutions and instructions provided by Slider Revolution are available here.
First you must to extend style of .rev_slider .slotholder (not of .tp-bgimg), because the start animation creates additional elements.
Second, the slider creates a duplicate of your image for animation, that has z-index more than source image z-index.
Try this, it will work well.
.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index: 99;
background: rgba(0,0,0,.5);
}
Found a super easy way that works!
Create a new shape. Name the layer overlay and drag it to the top. Colour it black. Change opacity to 50%. Width and height should be 100%. Choose "Stretch" in Cover Mode. Almost done. One more step.
Finally, go to Behavior and switch Align to "Slide Based". This will truly stretch the overlay to 100%.
Can't find it? Check this link.
https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/
Scroll to step 3. Adjust the Responsive Alignment.
Wish this was easier but it's not. Don't like the dotted overlay they include in the settings. Hope this helps someone.
Just incase for video add z-index and change css class:
.rs-background-video-layer:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index:1;
background: rgba(0, 0, 0, 0.3);
}
I found an update for the Slider Revolution Version 6, since this won't work anymore in newer versions:
.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: rgba(30,30,30,0.5);
}
The secound entry will do it for this specific slideshow (#rev_slider_2_1).
To have a more common approach for all slides which is equivalent to the previous solution, you could use something like this:
.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: rgba(30,30,30,0.5);
}
I'm trying to use jQuery's toggleClass() to click on a div and have that div expand to a height and width of 100% (in other words, full screen). I thought this would be easy, but for some reason, I'm struggling. Must be tired this morning... The following code toggles to 100% height and width, but it doesn't toggle back to the original size.
HTML
<div class="s3div1" id="s3div1"></div>
JS
$("div#s3div1").dblclick(function (event) {
$(".s3div1").toggleClass("overlay").toggleClass("s3div1");
});
CSS
.overlay {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
z-index:1000;
}
.s3div1 {
position: absolute;
z-index: 10;
top: 0px;
right: 25px;
height: 550px;
width: 225px;
border: 5px solid white;
border-radius: 25px;
float: right;
padding-right: 8%;
}
#s3div1 {
background-image: url('assets/volcano3.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Thanks in advance!
You are referencing by class name instead of the object to which the double-click event refers.
Instead use the value of $(this) which is the target object of the double-click (wrapped in a JQuery object for easier use):
$("div#s3div1").dblclick(function (event) {
$(this).toggleClass("overlay").toggleClass("s3div1");
});
I think you mean:
$("#s3div1").toggleClass("overlay").toggleClass("s3div1");
^-- # instead of .
Once you toggle the class .s3div1 wont match anymore so the 2nd time you dblclick nothing happens.
Go talk a walk, drink some coffee, eat an orange.
I am adding a dark shadow (as a before element) to a div on touch/click And removing it after the effect is done.
First click seems to be fine but on subsequent clicks, the effects gets darker and darker (until it gets to complete black).
It is as if there are multiple layers of before's
The only solution I have found so far it to setup the div's display property as "display: block" but this required me to do some layout rework. Any other suggestions ?
Here is the class I am using to set the highlight
.myDivCls:before
{
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: .3;
background-color: rgb(0,0,0);
}
And her is the one for removing it:
.noEffectCls:before {
content: '';
background-color: transparent;
background-image: none;
position: static;
border-radius: 0;
background-size: auto auto;
background-repeat: repeat;
background-position: 0% 0%;
-webkit-background-size: auto auto;
}
Thanks!
Have you tried using a the background shorthand prooperty on the .noEffectCls:before element and setting it to transparent?