How to make custom cursor display over image? - javascript

I'm building a portfolio site for myself and I made a custom cursor that follows the default one, by creating an empty div, styling it as a small circle, and making it trail behind the default cursor with Javascript. All of that works fine.
The problem is that once the cursor moves over an image, the circle is displaying under it.
HTML
<div class="cursor"></div>
<img src="https://steamuserimages-a.akamaihd.net/ugc/268338039154053677/D41BD0C4419DBF35C84CB17B2737B065504B1858/" alt="">
CSS
.cursor {
height: 15px;
width: 15px;
border: 1px solid #0b0d0f;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
pointer-events: none;
}
JavaScript
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
console.log(e);
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})
I would expect the custom cursor to hover over the image along with the default cursor, but instead is displays under it.

Give the hovering element a higher z-index in the CSS to make it appear in front of other elements (jsfiddle).
However, this may be a browser-specific problem—it works for me even without the z-index set.

Related

Making elements appear as if they share a background

I'm working on a to-do web app and I'm trying to achieve a visual effect wherein multiple todos appear to "share" a single background. So, imagine that a user adds a few todos. Their backgrounds appear as a part of a single gradient, with colors transitioning from top todo to bottom todo. This pen should hopefully demonstrate what I want to happen (click the first div):
Elements 'sharing' a background
HTML:
<div class="outer">
<div class="inner"></div>
<p>CLICK ME</p>
</div>
CSS:
.outer {
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 200px;
background: white;
overflow: hidden;
clip: rect(auto, auto, auto, auto);
transition: transform 500ms ease-in-out;
font-size: 2rem;
}
.inner {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, red, orange, green, blue);
opacity: 0.5;
}
Now this already kind of works, I guess, but only if I manually animate position of the divs. Is there some way to utilize CSS transforms instead? The big problem there is that as soon as a transform is applied to outer div, the fixed child div stops being fixed, completely destroying the 'same background' illusion. you can see it in this pen:
Illusion fail
I read that it's part of the spec and that's just how it is, but thought maybe you CSS wizards here know other ways to achieve this effect, perhaps even without fixed child divs. Would really appreciate your help.
Here's an example using clip-path, but one issue is that it doesn't clip the same way as clip does, because it only clips the element itself, not child elements under it. Children elements will also get clipped, so they have to be moved to match the new clip position.
https://codepen.io/mix3d/pen/OJPjbGp

JS/CSS: how to animate a circle to pill shape?

Ok this is what I'm trying to achieve (ideally with JS/jQuery):
https://dribbble.com/shots/3445331-Expanding-Button
On hover, I need a circular div to expand into a pill shape so other buttons can pop in within it. When I click the "x" again, I need it to roll back to a circle shape.
I only know how to scale things with JS/jQuery. How can I do this? I can't find anything just searching with plugins.
Instead of thinking that it is a circle to a pill shape, maybe try making it a square div, that changes the width to more of a rectangle on hover.
Then you would only have to make the border-radius rounded to look like a circle/pill shaped. Hope that makes sense.
#mari Lai is right on. If you think of the containing div as a single rectangle with a changing width and consistent border radiuses then it's really pretty straight forward. (you can trigger this with jQuery/JS or simply hover/focus css)
Something like this...
.pill {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #898989;
transition: width .5s ease;
}
.pill:hover, .pill:focus {
width: 240px;
}
<div class="pill">
</div>
So that "circle" in the beginning is a div with class circle, say with the following CSS:
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
}
Then you could change that to the following:
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
transition: width ease 0.3s;
}
So now the circle can animate width changes. We could define a "pill" width again with a class:
.pill {
width: 300px;
}
And if you want to use jQuery to trigger the width change on a click, we can do the following: toggle the pill class on the circle div
$(".circle").on("click", function() {
$(".circle").toggleClass("pill");
});
Of course to accomodate more buttons inside the "circle" div, you would use another selector for the click action, but you get the point :)
:edit:
Here's a fiddle for that: https://jsfiddle.net/6g0z3390/
:edit2:
I just realized you didn't want the change on click but on hover. In that case you could simply drop the JS and change the css from .pill to .circle:hover :)

Overlay/fade in a div/text when hovering over an image

I have an <img> that I want to be able to hover over, and when hovering over it I would be able to animate or fade in a div or text to display information of sorts. The information displayed will be overlaid on the image.
I've seen this done on a website before, I can't remember or place where I've seen it, but the idea is very clear in my mind.
I'm sorry I don't have any good attempts at this, I've read around and can't find anything that works for my idea.
I have not understood JS fully, but I can think of a few ideas to try and make it work. I just need a little help to get me in the right direction, before I try and do the rest by myself.
My first idea would be to remove the image directly, then replace it with a div that has that image in background-image with text overlaying it.
document.getElementById("imageBox").onmouseover = function() {
imageMouseOver()};
var image = document.getElementById("imageBox");
var textHere = imagine a lot of html here;
function imageMouseOver() {
document.getElementById("imageBox").parentNode.removeChild(image);
document.getElementById("imageBox").add(textHere);
};
The above doesn't work, and my other ideas would be based off of the initial one, for example:
-instead of removing the image, have the opacity of the image be reduced and something be added over it to simulate that effect
-or, have opacity:0 to the actual overlay to hide it, and onmouseover, just make it appear with opacity:1 and maybe transition: opacity 200ms ease?
Sorry I am asking too much here, but I'm pretty much clueless where to start, could someone point me somewhere for me to get started? Ideally a few examples would be good, or a site explaining it would be great!
Here's an example with CSS using :hover to transition the opacity of your text element.
.wrap {
display: inline-block;
position: relative;
padding: 1em;
background: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.text {
background: rgba(0,0,0,0.8);
color: #fff;
transition: opacity .5s;
opacity: 0;
position: absolute;
top: 1em; bottom: 1em; left: 1em; right: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.wrap:hover .text {
opacity: 1;
}
img {
max-width: 100%;
display: block;
}
<div class="wrap">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="text">text overlay</div>
</div>

Sliding Full width div in CSS Or Javascript

I have been looking around the internet for a while to find a good library or way of making a mobile full width/height div
And when I click a button it swipes to the right revealing another div
with new content, and pushing the current div to the left ( or right )
The blue box is my viewport, mobile in this case
Here's a crappy illustration to show what I mean
I have tried using CSS ( with semi-success ) I can reveal another div using
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out;
}
#slide-options {
background: #eee;
transform: translate(100%, 0);
}
#slide-options.active {
transform: translate(0,0);
}
But it's just sliding over the 1st div, not pushing it along
Any idea's or existing libraries?
Thank you!

Masking a web page

Example:
The area with the red border is where you can fully see through the mask. Everything else is grayscaled and partially hidden with opacity or transparent white background.
One thing I tried is to make a class for each selectable area with a grayscale filter and lower opacity. Then I apply this class on all areas but the selected one. But this doesn't work well this nested zones because some of the areas become less opaque than others.
Any advice on how could I implement this?
Codepen
Works as expected only on #footer, because it doesn't have parent or children areas that are selectable
You could apply an highlighted class to the chosen element like so
.highlighted {
border: 1px red solid;
outline: 999em solid rgba(255,255,255, .75);
}
A wide outline will cover all other elements.
Example : http://codepen.io/anon/pen/emOXRJ
Add an z-index higher then the overlay to the element you want too focus on.
I don't think there will be a straightforward way to do this. One idea would be to have four block elements around the edges of the element in question that have a semi-transparent fill colour, however you will have to measure and position these in JavaScript, and you'll have to take scrolling into account also. Before attempting this, I would look for a library that already offers this.
You can use a full sized div with a transparent grey background and a z-index higher than the rest of your site:
#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(200, 200, 200, 0.8);
z-index: 1;
}
and then on the zone you want to be fully visible you set an even higher z-index:
#other_content{
z-index: 2;
position: absolute;
top: 50px;
left: 100px;
border: red medium solid;
}
like in this fiddle

Categories

Resources