Here is a demo of my problem :
Demo
I have two absolute images and each of them animates clip-path. While second comes after first in the DOM I can see the hover animation. But I cant see the hover animation of first. So my idea was that whenever I hover first I also hover second by the amount first hovers.
So basically:
hover first --> expand clip-path of first --> shrink clip-path of second
hover second --> expand clip-path of second --> shrink clip-path of first
So far I tried the + connector, so for example:
.first:hover + .second {
}
But this will animate the second if I hover the first, so this does not help.
Any Ideas?
Your idea is right:
.first:hover + .second {
-webkit-clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
}
Fiddle: https://jsfiddle.net/sb4bk0xg/3/
Related
I want my background-image to follow the shape of its element. Like if I set my element's clip-path to:
clip-path: polygon(0 0, 50% 10%, 50% 90%, 0% 100%);
I want the background-image to change its size and aspect-ratio to match the element's clip-path.
Everything I try crops the background image instead of reshaping, stretching or squeezing it..
You may use background-size and eventually set some coordonates of your clip-path into css var() so it can be used by background-size:
here an example from your clip-path
html {
background:green;
--clipRight: 50%;/* value setting how far from left you clip the element */
}
body {
margin:0;
min-height:100vh;/* min-height because demo has no content to fill and stretch body */
clip-path: polygon(0 0, var(--clipRight) 10%, var(--clipRight) 90%, 0% 100%);
background:url(https://dummyimage.com/300) 0 0 / var(--clipRight) 100% no-repeat yellow;
}
Note that you might also need to set a different background to html and body to be sure your resized image is drawn on body and not transfered and drawn on html.
I rely on the using a wrapper to center most of my sites ala:
.wrapper {
margin:auto;
max-width: xxxpx;
}
Keeps things centered perfectly, BUT also clears the margins, which is causing my problems as I want to use a clip-path background to create a simple polygon background, which needs to go through the margins, like:
.wrapper {
background-color: #ebeef2;
clip-path: polygon(0 10%, 37% 0, 100% 10%, 100% 90%, 63% 100%, 0 90%);
}
How can I get all of the elements of my page centered without clearing the margins?
Every solution I've tried ends up with impossible to manage page centering of elements, or a cleared page margin.
Here is the full bleed clip path I want.
Here is the problem.
Here are codepens: no margin, margin with busted clip-path
I use clip-path to create the particular shape of the blue search button.
From Chrome you see a strange line at the cutout edge, while from Firefox everything is OK.
I am not the first to point this out, but I have not found a solution.
Chrome
Firefox
The clip-path is:
clip-path: polygon(0 0, 0 100%, 15px 50%);
What mystery is this? I also found a similar issue:
CSS - Strange border appearing on Chrome mobile with clip-path
I had a similar (if not the same) issue, I fixed this by adding the following style to the element with the clip-path:
transform: translateZ(0)
I had a similar issue where the right edge of a clip path was sitting just inside of 100%. I was able to fix this by setting the right edge x-coordinate values to 101% and adding overflow: hidden; to the parent element.
clip-path: polygon(0 0, 101% 0, 101% 80%, 0 100%);
I imagine you could do the same on the left side by inputting negative values?
Image before fix
Image after fix
In my case suggested transform: translateZ(0) and transform: scaleZ(1) did not help but this one yes...
transform: skewY(0.001deg);
I am sorry if it is dumb question, but this code is driving me crazy, i strip it down, was thinking i will be able to understand, but after doing that and investing 2-4 hours now i am confused about the things which i thought i knew.
This below code adding this cool effect when i over, it seems like background is appear from the bottom and goes to the top,
Only think i knew it has to some thing with background image, linear gradient, background size, and background-position
Please have look and try to take me out of my misery.
HTML CODE
<ul><li>Home</li> </ul>
css code
li {
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
background-size: 100% 200%;
transition: all .25s ease;
}
li:hover {
background-position: bottom center;}
li a {display: block;
padding: 1rem 0;}
If any body want to have link here is link as well.
https://codepen.io/arif_suhail_123/pen/jLPYOB
I've annotated your styles below to hopefully explain what is happening.
li {
// You're creating a background gradient, where the first 50% is transparent, the next 45% is #a2d39c and the last 5% is #7cc576
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
// The background size is twice the height of your element. Therefore with the 50% transparency and initial position, you're not going to see anything
background-size: 100% 200%;
// This will nicely transition between CSS property values when they change
transition: all .25s ease;
}
li:hover {
// When you hover over your list item, you're changing the position so that the bottom of the background is visible. This causes the 50% transparent portion of the background to disappear, and the coloured portion to slide into view
background-position: bottom center;}
}
Background Position
If you check out the CSS specs for background-position, you'll see that the default value is 0% 0%, which is basically top left.
Your CSS code does not specify an initial background position and so it will default to top left. Keep this in mind.
Your background gradient is defined to bottom, so from top -> bottom. The first 50% is transparent (invisible). The second 50% is comprised of two different colours.
Then consider that your background gradient is twice the height of your element. This is specified by the background-size: 100% 200% (100% width, 200% height). The background can be larger than the element to which it is applied, and any overflow will be hidden.
So initially when you're showing only the top half of your background gradient, what are you going to see? Only the transparent portion.
When you then override the background-position on hover, you're saying to now show the bottom center portion. Seeing as how your background matches the full width of your element, the center horizontal value doesn't change anything. But the bottom vertical setting does. It now means that the second 50% is displayed.
Does that help?
I'm trying to display only the top half of an image and the bottom half of the same image in 2 separate divs.
I've tried with the CSS property clip, but it doesn't seem to support % as a unit.
Is it just me? Do you have a solution for displaying only a half of an image?
Update (after 5+ years):
The CSS clip property is now deprecated. Consider using clip-path instead (allowing for a non-JS solution), which allows you to specify shapes with percentages. Example:
/* Bottom half of image */
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
/* Top half of image */
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
Further example to create a triangle using percentages:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Original:
CSS clip property does not currently support percentages:
http://www.w3.org/TR/CSS2/visufx.html#propdef-clip , latest http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping
A solution to your problem could be to use Javascript to determine the size of the area you want to show, and then use that value when setting the clip property. Something as simple as this should do the trick:
var heightOfImageToDisplay = image.height / 2;
Sorry that I don't have enough reputation to write a comment.
There's absolutely a solution without JS.
All you need to do is
Create an svg clipPath, which allows you define whatever path you want.
Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentage path definition
Apply the clipPath in your css code.
#your-element {
clip-path: url(#clipPathId);
}
If you want more information, please refer this answer https://stackoverflow.com/a/28312070/5692151
You could have the div as position: relative; and overflow: hidden;
Have the image inside as position: absolute;
And control how the image is displayed but setting a height to the div and adjust the top and bottom properties of the image
If you are using fixed height images and fixed height div, and you are doing this manually, why not put the image as a background, with overflow:hidden and proper background-position so it only shows the top one from the top down and bottom one from the bottom up?