I've broke my head trying to solve my problem but unfortunately I still didn't find the correct solution.
All I want is to have the white background to the left of the Column#1 and the grey background to the right of the Column#2.
But I can't find the needed attribute in the Column options (and I'm not sure if there are any.
I've attached the hand draw of what I want to do.
Thanks guys, you're the best.
Follow these steps:
Set the background of the section as Gradient.
Select White as 1st color
Select Gray as your 2nd color
Set Gradient type = Linear
Set Angel to 90
Now Adjust the Location as per your liking (15+ recommended)
Click the link below to see the result I have got.
You will see something like this
you can achieve this pretty easily by using a pseudo-element for the grey background. On your body set a white background.
body {
background: #fff;
}
main {
position: relative;
height: 250px;
}
main::after {
content: '';
background: grey;
position: absolute;
width: 35%;
height: 100%;
right: 0;
top: 0;
}
main .container {
z-index: 1;
position: relative;
}
<body>
<header>
</header>
<main>
<div class="container">
<div class="column1">
</div>
<div class="column2">
</div>
</div>
</main>
<footer>
</footer>
</body>
Related
I'd like to change the background image of the body (or my section) on link hover as in this example:
http://www.passion-pictures.com/paris/directors/
Is there any way to do it without using JS.
I only know how to code HTML/CSS
EDIT :
When I Hover on the first link (Michelle) it changes the background of my section as expected.
But when I hover on the second link (Franck) the top of my second link background begins under my first link. So the top of my default background is still visible.
My links are displayed vertically
It is possible but there will be too much HTML code and CSS workarounds.
if you still want in CSS only then refer this code - change css background on hover
HTML code
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background><div>
</div>
</div>
CSS Code
div.link > a {
displya: inline-block !important;
position: relative !important;
z-index: 5;
}
.bg1:hover + .background {
background: red;
}
.bg2:hover + .background {
background: green;
}
.background {
background: transparent;
position: absolute;
width:100%;
height: 100%;
top:0;
left: 0;
}
This will give you an idea of implementation but I'll suggest you go with JS that is a much better way of doing it.
Hope this might help you
HTML
<div class="container">
bg1
</div>
CSS
.bg1:hover::after {
content: "";
position: fixed;
top: 0;
left: 0;
background: red;
width: 100%;
height: 100%;
z-index: -1; /* index would get changed based on your need */
}
I want to highlight an image when a user hovers over it.
To do that, I'd like to put an overlay over everything else (or honestly, I'd be happy putting an overlay over everything including the image, and then putting something to brighten the image as well).
Is there anyway to do this without JS? I'm happy to use a JS solution if that's all that's available, but I was wondering if there was any CSS-only trickery that could manage to do this.
Example HTML would be like this:
<body>
<div>
<Other Elements />
<img src="...." />
</div>
</body>
Preferably everything would be darkened except the tag.
EDIT: THIS IS NOT a duplicate. It is very, very different from Overlay Images
If you wrap your image overlay image in a div container like so:
<div class="wrapper">
<div class="other-content">
</div>
<div class="popup">
<img src="...">
</div>
</div>
You can use a pseudo element :before to style an overlay on your image.
.popup {
img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
&:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
}
See example here:
https://codepen.io/dominicgan/pen/WXaXPy
Okay, so I'm building a WordPress site and the page in question can be seen here: http://test.pr-tech.com/power-line-markers/
The issue I am having is that I am using mix-blend-mode for one of my div containers to make use a 'lighten' blend on the background.
It works perfectly, but the issue I am having is that unfortunately the child elements inside the container (i.e. the text) are also inheriting the blend mode, and therefore it's making my text 'blend' as well, which isn't what I want (I want the text to have NO blend mode).
Anyways, you can see the code I am using below:
#category-intro-text {
padding: 0.625em 0.938em;
mix-blend-mode: lighten;
background-color: rgba(220, 235, 255, 0.8); repeat;
}
I tried applying something like 'mix-blend-mode: none;' to the text, but that doesn't work.
I've searched Google for an answer to this pretty extensively, but alas, there isn't much on this topic (if anything at all).
I realise you asked this a while ago but I've been playing with the same issue today and managed to fix it like this.
Wrap the content inside the #category-intro-text div with another div that is positioned relatively. Ultimately, you'll want to add the style to your css and not inline as I've done here.
<div id="category-intro-text">
<div style="position: relative;">
<h1>Power Line Markers</h1>
Etc. Etc.
</div>
</div>
Then remove the background colour and blending information you've got in the stylesheet for the #category-intro-text div. You should end up with...
#category-intro-text {
padding: 0.625em 0.938em;
position: relative;
}
Finally, use a ::before pseudo element to add the blended layer.
#category-intro-text::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(220, 235, 255,0.8);
mix-blend-mode: lighten;
}
Hopefully that will do it. It is working perfectly for me with a multiply layer.
EDIT: Here is a Fiddle forked from the previous answer.
I thought I had it worked out with the isolation property, but no. I didn't have much luck researching a solution for this issue either.
I suppose you could use this old trick: http://jsfiddle.net/cwdtqma7/
HTML:
<div class="intro-wrap">
<div class="intro-background"></div>
<div class="intro-content">
<h1>Hello</h1>
<p>Welcome to the thing.</p>
</div>
</div>
CSS:
body {
background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/power-line-markers-bg.jpg') top left no-repeat;
background-size: 800px;
font-family: sans-serif;
}
.intro-wrap {
position: relative;
}
.intro-background {
background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/category-intro-bg.png');
mix-blend-mode: lighten;
padding: 32px;
width: 300px;
height: 300px;
}
.intro-content {
position: absolute;
top: 0;
left: 32px;
}
Why use mix-blend-mode when there's background-blend-mode(maybe you have already tried that!) for that purpose. Actually mix-blend-modes blends the element it is applied on with everything beneath it. On the other hand background-blend-mode applied on a background blends only with the the background that is beneath it.
You can do this-
.outer-wrapper {
background: url(<url>), #fb3;
background-blend-mode: exclusion;
padding: 2em 4em;
}
.inner-text {
/**styling of you text***/
}
How to use mix-blend-mode, but not have it affect child elements?
Building upon #shanem's answer I found this solution
function change(id){
document.querySelector(id).style.backgroundColor="violet";
}
.group{
height:10rem;
width:10rem;
position:absolute;
visibility: hidden;
}
.group::before{
content:"";
visibility: visible;
position:absolute;
height:100%;
width:100%;
background-color:inherit;
mix-blend-mode:multiply;
z-index:-1;
}
.btn{
background-color:red;
color:white;
visibility: visible;
padding:0.5rem;
}
<div id="g1" class="group" style="background-color:cyan;">
<input type="button" class="btn" value="change" onclick="change('#g1')"/>
</div>
<div id="g2" class="group" style="margin:1.5rem;background-color:yellow">
<input type="button" class="btn" value="change" onclick="change('#g2')"/>
</div>
The best part is that you can directly change the background-color using javascript.
The only caveat (if you'd want to call it that) is that every child element must set visibility: visible;
Fiddle of the issue: http://jsfiddle.net/Vy365/3/
I'm trying to create sections on a page that have a parallax scrolling effect.
The main CSS I'm using to achieve this is background-attachment: fixed for the background image, and position: fixed for the text on top of the image.
I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.
HTML:
<section>
<div id="parallax-1" class="parallax">
<div class="title">
<h1>Fixed Text 1</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
<section>
<div id="parallax-2" class="parallax">
<div class="title">
<h1>Second Fixed Text</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
CSS:
.parallax {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
max-width: 1920px;
height: 200px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
z-index: 1;
}
.parallax .title {
position: fixed;
top: 80px;
}
#parallax-1 {
background-image: url(http://placekitten.com/500/200);
}
#parallax-2 {
background-image: url(http://placekitten.com/500/202);
}
.scrolling-content {
position: relative;
width: 100%;
height: 200px;
background: #ffffff;
z-index: 2;
}
The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the fiddle).
Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?
Think you want to use position:absolute instead of position:fixed on your '.parallax .title' class
Since you are using jQuery anyway, why don't you try a plug in like http://stephband.info/jparallax/ ?
EDIT: For mobile apps, you may want to check out Skrollr. It is pure Javascript, and there are some really good examples in the "In the wild" section.
It can help you from re-inventing the wheel.
Here are two tutorials (both using Skrollr.js) which might help others trying to create a similar parallax scrolling effect.
How to create a parallax scrolling website
Simple parallax scrolling tutorial
I found a lot of questions on stack overflow about getting rid of white space, but I can't seem to figure out how to put it in.
I have a bottom navigation on my site that floats with the page, but if the window is small, the bottom part of the page gets covered up. I would like to insert some white space at the bottom, so when the window is smaller than the length of the page you can still read it.
I've tried adding:
margin-bottom: 50px;
padding-bottom: 50px;
to the div containing the top page content, but it doesn't work.
Is there something I am missing? Here's a demonstration: http://www.writingprompts.net/name-generator/
#left, #right {
margin-bottom: 90px;
}
or
#top_section > div {
margin-bottom: 90px;
}
It doesn't work on #top_section because you use absolutes and therefore the content actually over extends the div itself, but trust me, either of those two css' i gave you WILL work
Simply add the following rule:
#top_section {
overflow: hidden;
padding-bottom: 90px;
}
This will make #top_section be as big as the floating content inside it.
http://jsfiddle.net/rlemon/fSYmu/ This is a simplified example, having no idea what your layout looks like (I am not going to assume the demonstration is yours... unless you revise and tell me it is) i'll show you how I would do this
HTML
<div class="container"> <!-- main page wrapper -->
<div class="content"> <!-- main content wrapper, backgrounds apply here -->
<div class="inner-content"> <!-- content inner, where your content goes! -->
content
</div>
</div>
<div class="footer">footer</div> <!-- footer -->
</div>
CSS
html,body,.container {
height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is.
}
.content {
height: 100%; // see above... i need to cascade down.
background-color: green;
}
.content-inner {
padding-bottom: 100px; // offset for the footer.
}
.footer {
width: 100%;
position: absolute; // stick me to the bottom.
bottom: 0;
height: 100px;
background-color: red;
}
enjoy!
You need to use fixed position in CSS to achieve this.
HTML:
<div id="top-section">
Insert content here...
</div>
<div id="bottom-nav">
<div id="content">
Bottom content...
</div>
</div>
CSS:
#bottom-nav {
bottom: 0;
position: fixed;
width: 100%;
}
#content {
margin: 0 auto;
width: 960px;
}