We Keep Coding

How to make image opacity respond to cursor position

I have a cartoon of an antique "detour" sign that has cataphote reflectors embedded in the letters. I want the reflectors to brighten as the image is hovered. That's easily done, I know, simply by swapping out a version of the image with the reflectors darkened with an image of them brightened on hover (per the markup below). However, doing it this way makes the reflectors appear to blink on or off. I want them to get increasingly bright as the cursor nears the center of the image and, of course, dim as the cursor moves away from it, as would occur in real life. (If your headlights beamed at the reflectors at an oblique angle, the light they reflect back would be dimmer than if your headlights hit them straight on.)
My thought is just to increase the opacity of the brightened version of the image in response to the position of the hovering cursor. So, what I need (I think) is a script that detects the cursor position and increases or decreases the opacity accordingly: opacity: 0; at the edge and opacity: 1; at the center. Probably not too challenging for someone adept in javascript/jquery. I've hunted around for a script that does that or something very close to it but haven't been able to locate one that is close enough for me to modify.
I have an additional issue in that in Firefox, at least, the hover image "flicks" the first time it is invoked. I've tried all of the preloading suggestions I could find here on stackoerflow but none of them work. I found that a sprite solved the flicking problem, but wasn't sure how that would work with the way I want the image to animate. Presuming non-sprite images are the way to go maybe if the script invokes the "bright" version of the image at an initial opacity of 0 as the cursor crosses the threshhold, it will also hide the loading "flick...?" Just a guess. Alternatively, I could redesign the hovered version so that it is just the reflectors if that would solve everything else.
Finally, as you can see, the sign is a button that returns a random page. Assuming what I need to solve this problem is a script, can I run both scripts off of the same id (#detour) or should this script use a class name instead? (I am clearly an example of a little knowledge being a dangerous thing.)
Anyway, here's what I've got.
.detour-box {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#detour {
position: absolute;
background: transparent url(https://sodyot.com/wp-content/uploads/2021/03/detour-sign_3.png) no-repeat center center;
background-size: 100%;
clip-path: polygon(48% 0%, 49% 1%, 50% 0%, 69% 19%, 81% 31%, 94% 42%, 100% 48%, 100% 49%, 85% 65%, 76% 75%, 63% 88%, 53% 99%, 52% 100%, 48% 97%, 37% 87%, 28% 79%, 16% 67%, 8% 59%, 0 49%, 3% 45%, 14% 35%, 28% 20%);
width: 300px;
height: 295px;
}
#detour:hover {
background: transparent url(https://sodyot.com/wp-content/uploads/2021/03/detour-sign_3on.png) no-repeat center center;
background-size: 100%;
cursor: pointer;
}
<div class="detour-box">
<button id="detour" class="detour" onclick="randomlink()"></button>
</div>

It's not possible to transition from one image to another on the same element by changing the src or background-image value. But you can do it by having both images, and hiding one by default.
Having one image hidden opens the possibility to fade or crossfade between the images. Lay them on top of each other, with the hidden image on top, and show the hidden image on hover.
The image on top can now fade-in by changing the opacity value. With the transition property you can control the transition.
.detour-box {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#detour {
position: absolute;
display: grid;
grid-template: 1fr / 1fr;
clip-path: polygon(48% 0%, 49% 1%, 50% 0%, 69% 19%, 81% 31%, 94% 42%, 100% 48%, 100% 49%, 85% 65%, 76% 75%, 63% 88%, 53% 99%, 52% 100%, 48% 97%, 37% 87%, 28% 79%, 16% 67%, 8% 59%, 0 49%, 3% 45%, 14% 35%, 28% 20%);
width: 300px;
height: 295px;
cursor: pointer;
}
#detour img {
grid-area: 1 / 1 / 2 / 2;
width: 100%;
height: 100%;
}
#detour img:last-child {
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: 1;
}
#detour:hover img:last-child {
opacity: 1;
}
<div class="detour-box">
<button id="detour" class="detour" onclick="randomlink()">
<img src="https://sodyot.com/wp-content/uploads/2021/03/detour-sign_3.png" alt="Detour sign off"/>
<img src="https://sodyot.com/wp-content/uploads/2021/03/detour-sign_3on.png" alt="Detour sign on"/>
</button>
</div>

If we punch holes in the detour sign we only need one image.
The background image can have a linear gradient put behind it, the color(s) of which are changed as the mouse moves. In this snippet the color is always some gray, going up to white, and is changed depending on the y movement of the mouse. It would be easy to change it to take x into account as well. And there could be a real gradient to the background to give different effects - depends just what effect is wanted.
The JS alters a CSS variable, --col, depending on the distance from the center.
function makeColor(d) {
d = Math.floor(d);
return 'rgb(' + d + ',' + d + ',' + d + ')';//could use rgba to get opacity also
}
const detour = document.getElementById("detour");
const dimCol = 128;//set this to the initial (switched off) r, g and b gray
detour.style.setProperty('--col', makeColor(dimCol));
detour.addEventListener('mouseout', function () {
detour.style.setProperty('--col', makeColor(dimCol));
});
detour.addEventListener('mousemove', function () {
const rect = detour.getBoundingClientRect();// this should be in a window resize function if you have one
const h = rect.height;// ditto
const y = event.clientY - rect.top; //ditto
const distanceY = Math.abs(y - h/2)/h;
const d = 255 * (1 - 2 * distanceY);
detour.style.setProperty('--col', makeColor(dimCol + (d * (255 - dimCol) / 255)));
});
.detour-box {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div#detour {
position: absolute;
background-color: transparent;
background-image: url(https://ahweb.org.uk/detour-with-holes.png), linear-gradient(to bottom, transparent 0%, transparent 40%, var(--col) 40%, var(--col) 60%, transparent 60%, transparent 100%);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%, 70%;
clip-path: polygon(48% 0%, 49% 1%, 50% 0%, 69% 19%, 81% 31%, 94% 42%, 100% 48%, 100% 49%, 85% 65%, 76% 75%, 63% 88%, 53% 99%, 52% 100%, 48% 97%, 37% 87%, 28% 79%, 16% 67%, 8% 59%, 0 49%, 3% 45%, 14% 35%, 28% 20%);
width: 300px;
height: 295px;
margin: 0;
padding: 0;
}
<div class="detour-box">
<div id="detour" class="detour" onclick="randomlink()"></div>
</div>
It is fine to have more than one event listener on an element, so the existing onclick remains.

Opposite side border radius

I don't know if this exists but I am making for myself a little web builder where I add new HTML element give it attributes I want and their values.
After than I made some CSS changes via Javascript and for border-radius I use this:
function borderRadius(){
var dr = document.getElementById("displayColor");
var rv = document.getElementById("radiusValue");
var tl = document.getElementById("tl").value;
var tr = document.getElementById("tr").value;
var bl = document.getElementById("bl").value;
var br = document.getElementById("br").value;
rv.innerHTML = 'Top-Left: '+tl+'%; Top-Right: '+tr+'%; Bottom-Left: '+bl+'%; Bottom-Right: '+br+'%;';
dr.style.borderTopLeftRadius = tl+'%';
dr.style.borderTopRightRadius = tr+'%';
dr.style.borderBottomLeftRadius = bl+'%';
dr.style.borderBottomRightRadius = br+'%';
}
This code isn't important and it looks like ..
Now my question is can I make trough CSS something like
without make additional elements around?
UPDATE:
As GabyakaG.Petrioli commented, this maybe a solution and with it I am half way there:
.round {
background:
radial-gradient(circle at 0 50%, rgba(204,0,0,0) 40%, #c00 10%),
radial-gradient(circle at 100% 50%, rgba(204,0,0,0) 40%, #c00 10%),
radial-gradient(circle at 100%, rgba(204,0,0,0) 40%, #c00 10%),
radial-gradient(circle at 0, rgba(204,0,0,0) 40%, #c00 10%);
background-position: bottom left, bottom right, top right, top left;
background-size: 50% 100%;
background-repeat: no-repeat;
padding: 10%;
padding-left: 22%;
padding-right: 22%;
}
<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>
Also here I found the answer and solution but still I have some margins or something:
*{margin: 0; outline:0; border: 0;}
.round {
background:
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 70%, #c00 71%),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 70%, #c00 71%),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 70%, #c00 71%),
radial-gradient(circle at 0 0, rgba(204,0,0,0) 70%, #c00 71%);
background-position: bottom left, bottom right, top right, top left;
background-size: 50% 50%;
background-repeat: no-repeat;
width: 300px;
height: 300px;
padding: 10%;
transform: rotate(45deg);
}
p{
transform: rotate(-45deg);
width: 100px;
margin: 100px;
}
<div class="round"><p>
By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p></div>

No, there are no inset or inverse border-radius in CSS as of now. But there are very many ways to create this shape. I've answered your radial-gradient question in the other thread but think this is a good enough shapes question to stand on its own and hence giving a detailed answer here with all the different possible methods to create this shape.
Using Radial Gradient:
Just adding here for the benefit of others. It's a repeat but makes the answer complete. We can use four ellipses (or circles) created using radial-gradient background images and place them at their appropriate position to create this effect. The output shape is responsive but it cannot be used when the shape should have :hover effects restricted to the shape boundaries or have anything other than a solid color as the fill/background. It also needs a square shaped container (not a rectangle).
div {
width: 300px;
height: 300px;
}
.radial-grad {
background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
background-position: bottom left, bottom right, top right, top left;
background-size: 50% 50%;
background-repeat: no-repeat;
transform: rotate(45deg);
backface-visibility: hidden;
}
/* just for demo */
div {
transition: all 1s ease;
}
div:hover {
width: 350px;
height: 350px;
}
<div class='radial-grad'></div>
Using SVG:
SVG is the recommended tool for creating such complex shapes. We can easily create the required shape using path element and its various commands. SVG is scalable (responsive), is very easy to create and maintain, allows greater control over the shape like its slope etc. It can support gradient or image backgrounds too. Unlike radial-gradient, this works well with rectangular containers too.
By modifying the control point of the quadratic curve (first coordinate provided after the Q command), we can control the slope/curve of the cut-off area. The d attribute of the path element can be set or modified via JS just like we do for any other HTML attributes.
But we have to remember that SVG is a graphic (image). We can't control a HTML element that you're adding to the page through pure SVG alone. That would need clip-paths or something like that.
svg {
height: 300px;
width: 300px;
}
/* just for demo */
svg {
transition: all 1s;
}
svg:hover {
height: 200px;
width: 250px;
}
<svg viewBox='0 0 200 200'>
<defs>
<pattern id='bg' width='200' height='200' patternUnits='userSpaceOnUse'>
<image xlink:href='https://placeimg.com/200/200/nature' height='200' width='200' />
</pattern>
</defs>
<path d='M0,0 Q100,60 200,0 Q140,100 200,200 Q100,140 0,200 Q60,100 0,0z' fill='url(#bg)'/>
</svg>
Using Clip-path:
This is similar to the pure SVG version but unlike that one where the shape is created and then placed behind or inside the container, here we cut the container element itself into the required shape.
Pure CSS method (without SVG) is available but it doesn't support complex paths yet. It supports only basic shapes and so we have to use clip-path along with a SVG definition. Moreover, Firefox supports it only when used with SVG (like url(#id)). IE still doesn't support clip-path and that's one reason why this is not yet good for production implementations.
This is good when the shape has background as an image or a gradient instead of a solid color and it can also work well when :hover effects are needed because we are cutting out the required paths.
This is more like an inset border-radius because the element doesn't exist outside the clipped area.
div {
height: 300px;
width: 300px;
background-image: url(https://placeimg.com/200/200/nature);
}
.clip-path {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
/* just for demo */
div {
transition: all 1s ease;
}
div:hover {
height: 350px;
width: 325px;
}
<svg width='0' height='0'>
<defs>
<clipPath id='clipper' clipPathUnits='objectBoundingBox'>
<path d='M0,0 Q0.5,0.3 1,0 Q0.7,0.5 1,1 Q0.5,0.7 0,1 Q0.3,0.5 0,0z' />
</clipPath>
</defs>
</svg>
<div class='clip-path'></div>
Using Masks:
This feature is currently supported only by WebKit powered browsers and hence isn't recommended now but it is a very good option for the future. This approach is especially useful when the shape's background would be an image or a gradient and not just a solid color.
The working of masks is very similar to the radial-gradient approach but the difference lies in the fact that unlike radial-gradient which fills the remaining space with solid color, this would just mask out the unwanted portions and not add any fill of its own. So, the background image that is assigned to the element originally will be preserved.
This method is not good if we want to have :hover effects that is restricted to the boundaries of the shape as it doesn't cut out the unwanted portions, it just masks them out or make it transparent.
Similar to the radial-gradient approach, this also needs a square shaped container to work but it is otherwise responsive.
div {
height: 300px;
width: 300px;
background-image: url(https://placeimg.com/200/200/nature);
}
.mask {
-webkit-mask-image: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
-webkit-mask-position: bottom left, bottom right, top right, top left;
-webkit-mask-size: 50% 50%;
-webkit-mask-repeat: no-repeat;
transform: rotate(45deg);
backface-visibility: hidden;
}
/* just for demo */
div {
transition: all 1s ease;
}
div:hover {
height: 350px;
width: 350px;
}
<div class='mask'></div>
Using Pseudo element and Box shadows:
I don't recommend this approach as it has a lot of drawbacks but is still an option. If we just need to create the shape, don't require :hover effects, don't require the cut off areas to be transparent (that's the cut-off areas can be a solid color, like white in this snippet) then we can try this approach.
It involves placing 2 elliptical pseudo-elements on the top, left side and then getting their shadows to do the work on their opposite sides.
div {
position: relative;
height: 300px;
width: 300px;
background: #c00;
}
div:before {
position: absolute;
content: '';
height: 50%;
width: 110%;
top: -35%;
left: -5%;
background: white;
border-radius: 50%;
box-shadow: 0px 360px 0px 0px white;
}
div:after {
position: absolute;
content: '';
width: 50%;
height: 110%;
left: -35%;
top: -5%;
background: white;
border-radius: 50%;
box-shadow: 360px 0px 0px 0px white;
}
<div></div>

Is it possible to animate background: linear-gradient using CSS 3 Animations? [duplicate]

I have several animations on my site that I just realized do not even show up in Firefox or Internet Explorer. I have the background-image within the keyframes. I do this because I have different images in different percentages with the animation.
Why doesn't the background-image display within the keyframes in Firefox and Internet Explorer and is there a way to make this work?

As per the specs, background-image is not an animatable or a transitionable property. But it does not seem to say anything about what or how the handling should be when it is used as part of transition or animation. Because of this, each browser seem to be handling it differently. While Chrome (Webkit) is displaying the background image, Firefox and IE seem to do nothing.
The below quote found in an article at oli.jp provides some interesting information:
While CSS Backgrounds and Borders Module Level 3 Editor’s Draft says “Animatable: no” for background-image at the time of writing, support for crossfading images in CSS appeared in Chrome 19 Canary. Until widespread support arrives this can be faked via image sprites and background-position or opacity. To animate gradients they must be the same type.
On the face of it, it looks like Firefox and IE are handling it correctly while Chrome is not. But, it is not so simple. Firefox seems to contradict itself when it comes to how it handles transition on background image as opposed to animation. While transitioning background-image, it shows up the second image immediately (hover the first div in the snippet) whereas while animating, the second image doesn't get displayed at all (hover the second div in the snippet).
So, conclusion is that it is better to not set background-image inside keyframes. Instead, we have to use background-position or opacity like specified # oli.jp.
div {
background-image: url(https://placehold.it/100x100);
height: 100px;
width: 100px;
margin: 10px;
border: 1px solid;
}
div:nth-of-type(1) {
transition: background-image 1s ease;
}
div:nth-of-type(1):hover {
background-image: url(https://placehold.it/100/123456/ffffff);
}
div:nth-of-type(2):hover {
animation: show-img 1s ease forwards;
}
#keyframes show-img {
to {
background-image: url(https://placehold.it/100/123456/ffffff);
}
}
<div></div>
<div></div>
If you have multiple images that should be shown at different percentages within the keyframe then it would be a better idea to add all those images on the element at start and animate their position like in the below snippet. This works the same way in Firefox, Chrome and IE.
div {
background-image: url(https://placehold.it/100x100), url(https://placehold.it/100/123456/ffffff);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0px 0px, 100px 0px;
height: 100px;
width: 100px;
margin: 10px;
border: 1px solid;
}
div:hover {
animation: show-img 1s steps(1) forwards;
}
#keyframes show-img {
to {
background-position: -100px 0px, 0px 0px;
}
}
<div></div>
Or, like in the below snippet. Basically each image is the same size as the container as background-size is set as 100% 100% but only one image is shown at any given time because of them being the same size as container. Between 0% to 50% the first image is shown because it is at 0px,0px (left-top) whereas the second image is at 100px,0px (outside the right border). At 50.1%, the first image is at -100px,0px (outside left border) and second image is at 0px,0px and so it is visible.
div {
background-image: url(https://picsum.photos/id/0/367/267), url(https://picsum.photos/id/1/367/267);
background-size: 100% 100%; /* each image will be 100px x 100px */
background-repeat: no-repeat;
background-position: 0px 0px, 100px 0px;
height: 100px;
width: 100px;
margin: 10px;
border: 1px solid;
animation: show-img 5s ease forwards;
}
#keyframes show-img {
0%, 50%{
background-position: 0px 0px, 100px 0px; /* initially 1st image will be shown as it it as 0px 0px */
}
50.1%, 100% {
background-position: -100px 0px, 0px 0px; /* at 50.1% 2nd image will be shown as it it as 0px 0px */
}
}
<div></div>

Parallax background image that isn't exactly fixed

I am trying to create a subtle parallax effect on a background image inside a div. I have used the following markup and CSS..
HTML
<div class="widget bg-parallax" style="background-image: url(~~set dynamically~~)"></div>
CSS
.widget {
height:500px;
position: relative;
}
.bg-parallax {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
But this creates a background image that is fully stationary as the page scroll.
I would like for the background to scroll but at a much slower rate than the page.
Is this achievable with pure CSS? If not, can anyone point me in the right direction with JS/jQuery.

There are a couple ways you can do this. Yes, it is achievable with pure CSS.
.forefront-element {
-webkit-transform: translateZ(999px) scale(.7);
transform: translateZ(999px) scale(.7);
z-index: 1;
}
.base-element {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.background-element {
-webkit-transform: translateZ(-999px) scale(2);
transform: translateZ(-999px) scale(2);
z-index: 3;
}
This controls the height. The negative Z values make it go slower when scrolling.

Look at this code in w3schools.com, yours is slightly different http://www.w3schools.com/howto/howto_css_parallax.asp

CSS transform that looks like a hardcover book being opened?

I'm trying to create a CSS transform on a div that makes it look like the cover of a book opening.
This means the left side is bound, and the right side flys towards the user getting larger.
Can anyone offer some direction? If it works in webkit that is all I need!
EDIT: I'm looking for the effect you would find with a hardcover book. I don't want the pages to bend or fold, just the right side comes out at the user.
I've done this, it's pretty close but I can't get the left side to lock in place.
#-webkit-keyframes BookCover
0%
-webkit-transform perspective(400px) rotateY(0deg)
opacity 1
100%
-webkit-transform perspective(400px) rotateY(-90deg)
opacity 0
got it, you need to change the orgin -webkit-transform-origin top left

CSS Play has a demo for a css only flipbook : http://www.cssplay.co.uk/menu/peter-rabbit.html
Take a look at the source for some inspiration.
To create a more true 3D effect, the matrix3D tranformations are the coolest thing since sliced bread, but currently only supported in Chrome.
EDIT:
Created a a little test fiddle for 3D transforms, try tweaking it to get the result you want :
http://jsfiddle.net/XnA2f/

here's a fiddle I just made for a peel effect:
http://jsfiddle.net/pixelass/TW43V/17/
for a hardcover feel you would have to play around with rotate3d, which only works on the iOS and Safari mac OS X as far as I know.
peel effect with rotate3d (Safari OS X)
http://jsfiddle.net/pixelass/TW43V/18/
UPDATE:
basic hardcover flip
Hardcover CSS flip
.book {
height: 300px;
width: 600px;
background: red;
position: relative;
perspective: 2000;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.2) 100%);
}
.page {
height: 270px;
width: 285px;
position: absolute;
top: 15px;
right: 15px;
transition: transform 300ms linear;
transform-origin: 0 0;
background: white;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0, #fff 10%, #fff 50%, rgba(0, 0, 0, 0.2) 100%);
z-index: 1;
&:hover {
z-index: 2;
}
&.flipped {
transform: rotate3d(0, 1, 0, -180deg);
}
}

Here's a working example http://www.romancortes.com/ficheros/page-flip.html

I've never done it before but I would imagine that CSS could only go so far. I think Jquery is maybe a bit of a better option.
But if I was to do it in CSS i'd have a container div that then uses the CSS pseudo selector :before or :after. Which simply attaches an element to another using only CSS. I'd style them however. Then I would expand using -webkit-transform or whatever, when the user hovers etc.
Heres a guy thats pretty good with CSS and design in general, he has a free example
http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/
Heres a link to the pseudo selector
http://w3schools.com/cssref/sel_before.asp

#-webkit-keyframes BookCover
0%
-webkit-transform perspective(400px) rotateY(0deg)
-webkit-transform-origin top left
100%
-webkit-transform perspective(400px) rotateY(-90deg)
-webkit-transform-origin top left
(written in stylus)

HTML
<div>book cover</div>
CSS
div {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
}
div:hover {
-webkit-transition: -webkit-transform 3s ease;
-webkit-transform: rotateY(-90deg) skewY(-45deg);
-webkit-transform-origin: 0 0 0;
}
See fiddle for a live demo.