Is it possible to have the CSS cursor property of a div propagate through a transparent div that overlays it?
Let me illustrate with a mock-up: https://jsfiddle.net/azL1ot2d/
With the following HTML code:
<div id="page">
<div id="clickable">Click me!</div>
<div id="glasspane">
<div id="other">Some glass-pane content</div>
</div>
</div>
And the following CSS code (reduced to the important parts):
#page {
position: absolute;
width: 100%;
height: 100%;
}
#clickable {
position: absolute;
top: 100px;
left: 100px;
background-color: orange;
cursor: pointer;
}
#glasspane {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: transparent;
}
#other {
...
}
Notice how I set the cursor property on the clickable div, but the div is entirely covered by the glasspane div (which I use for effects, dialogs, ...). Is it possible to have the mouse-cursor change to the link-pointer if it hovers above the clickable-div even though the div is covered? In other words: Can I make the glasspane transparent to cursor settings? (I'd prefer not to use JavaScript for this)
Yes you can but there is no IE support, there you go : JSFiddle
The trick is to use pointer-events: none; on the top layer :)
#glasspane {
pointer-events: none;
}
Related
I want to add rgba(0,0,0,0.25) on top of backgroundColor: "#0075FF" to make it darker. However is there any way to achieve it without using a mixed color value? Note: I also would like to avoid an approach that has an overlaid element on top of it.
You can use a this trick with linear gradients:
background: linear-gradient(#f005, #f005), linear-gradient(#0f05, #0f05);
In this way you are using two gradients with alpha. The trick is that the colours of gradients starts and ends with the same value.
You can do a pure CSS approach, although it sort of overlays a pseudo-element on top of the main element.
*Try hovering over the example.
.colored {
background: #0075FF;
width: 100px;
height: 100px;
position: relative;
}
.colored:hover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.25);
}
<div class="colored"></div>
You can always make a separate container, place the elements in it, then in css make the new container the same size as the one you want to place on the other. I used a low opacity so you can see through the top color, making it look purple when it isn't.
You gain adjust the size of the container and then use placement methods as you wish.
.main {
width: 200px;
height: 200px;
background: red;
}
.img {
background-color: blue;
width: 200px;
height: 200px;
z-index: 2;
opacity: .5;
}
<div class="main">
<div class="img"></div>
</div>
You can use a :before pseudo element.
<div className="container">
....content
</div>
.container {
position: relative;
background-color: #0075FF;
}
.container:before {
content:"";
display:block;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.25);
}
I have create a bottom div that is present all the time when scrolling the site. Its "natural" stop is right after the footer. When I do scroll, and it's not at the footer, it is a bit transparent. However, what I would like to do is when the sticky div reaches the bottom (i.e. its "true" position), then the background changes or something like that.
Is that possible WITHOUT using JS or something like that ?
Updated with a fiddle:
https://jsfiddle.net/octvg6mn/
HTML:
<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>
CSS:
.largeDiv {
height: 1500px;
width: 100%;
background: #cccccc;
}
.stickyDiv {
position: sticky;
bottom: 0px;
text-align: center;
background: blue;
color: white;
opacity: 0.8;
padding: 25px;
}
.stickyDiv:hover {
opacity: 1.0;
}
So as you can see in the fiddle, the sticky has a light opacity while scrolling, but when I reach the bottom, where it is supposed to be, I would like it to turn the opacity into 1.0 or something like, just like when hovering the mouse.
You can apply an opaque background to the container to simulate this. When the sticky element will reach the bottom that background will hide the transparency:
.largeDiv {
height: 1500px;
width: 100%;
background: #cccccc;
}
.container {
background:rgba(0,0,255,1);
}
.stickyDiv {
position: sticky;
bottom: 0px;
text-align: center;
background:rgba(0,0,255,0.5);
color: white;
padding: 25px;
}
.stickyDiv:hover {
background:rgba(0,0,255,1);
}
<div class="container">
<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>
</div>
I want to apply a background-color on an image to put a shadow on it.
Nothing very peculiar for now, I simply put background-color:rgba(23,23,23,0.88); in my CSS.
But on this image, I need to have an other div, who display the real image without the shadow on it and I don't know how I can do it.
I made a fiddle because it must not be very clear: https://jsfiddle.net/Haplo31/aguxfr67/
In this fiddle, I would need to have the blue div "content" displaying the part of the image below without the background-color of the bgContainer, like a window on the image. (I don't need the blue color at all, it's just to highlight the div for the example)
Is this possible?
Thanks a lot for your time and your help
You could be using the box-shadow property, which comes in pretty handy in situations like this. I modified your bg-container class and added a :before selector to apply the shadow.
Text can be inserted through the content css-attribute, you could also create another div-class, apply the same positioning properties and fuel your text into that.
.imgContainer {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoR1aeLhVEeg-rfmWln8uuNI7t0El3zNY8HHfKT1Qwd2oN8-GPQQ');
background-size: cover;
width: 300px;
height: 200px;
}
.bgContainer {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bgContainer:before {
content: 'This is some sample text to demonstrate you can get content as well';
color: white;
padding: 5px;
width: 50%;
height: 50%;
position: absolute;
bottom: 25%;
right: 25%;
box-shadow: 0 0 0 300px black;
opacity: 0.88;
}
.content {
width: 100px;
height: 100px;
top: 100px;
background-color: blue;
}
<div class="imgContainer">
<div class="bgContainer">
<!--<div class="content">
</div>-->
</div>
</div>
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
I have a image that I would like to position other images on. For example players on a basket ball court
What is the best way to do this with CSS, I am tempted to do this with tables but fear there maybe a better solution out there
If you use tables I'll castrate you :)
So on with divs and CSS:
HTML:
<div id="bb-court">
<div id="player-1">
</div>
</div>
CSS:
#bb-court {
z-index:1;
}
#player-1 {
z-index:2;
background-image: url();
position: absolute;
margin: top right bottom left; /* All with reference to parent */
}
There are only better solutions than tables for this :).
What you're looking for is called absolute positioning. It means that you can grab an element, take it out of the document flow and define its coordinates (left, top). By default, 0,0 coordinates start at the top left corner of the browser area.
Let me give you an easy example. Here we define everything as divs:
<div id="court">
<div class="player" id="john_smith">
<div class="player" id="gunter_kreitzsch">
</div>
And the CSS that goes with it:
#court {
position: relative; /* makes the top left corner of court 0,0 */
width: 500px; height: 500px; /* define size */
background-image: url(court.jpg);
}
.player { /* definition for player divs */
position: absolute;
width: 20px; height: 100px;
}
#john_smith { /* individual player definition */
top: 30px; left: 50px; /* defining where the player should be */
background-image : url(john_smith.png);
}
You can create multiple divs and use css to style it kind of like this (may not be accurate as I am just going off the top of my head)
<div class="court">
<div class="player"></div>
<div class="ball"></div>
</div>
#css
.court {
float: left;
position: relative;
background: url(../images/court.png) no-repeat;
width: 400px;
height: 200px;
}
.court .player {
position: absolute;
left: 5px;
top: 10px;
}
.court .ball {
position: absolute;
left: 5px
top: 10px;
}
Remember this is a quick mock, I would suggest going down this route and using Firebug for firefox to debug and get the positioning you want.