A very simple example:
HTML:
<body>
<img class="test" src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGVuc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" />
</body>
CSS:
.test:hover, .test:focus {
clip-path: polygon(70% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
}
Whenever I hover on the image the animation works fine but when I hover on the clip path it breaks and the full image is displayed, which is wrong. Kindly help me to maintain the animation while I hover on the clip path as well.
I want to achieve the below animation on hover, which is working:
But when I try to hover my mouse towards the below direction, the animation hides but I want that the animation should be maintained.
Put image in container then use hover on container with image
.test {
width: fit-content;
height: fit-content;
}
.test:hover .img {
clip-path: polygon(70% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
}
<body>
<div class="test">
<img class="img" src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGVuc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" />
</div>
</body>
You can use mask if you don't want an extra wrapper:
img:hover {
-webkit-mask: linear-gradient(-145deg,#0000 15%,#000 0);
}
<img class="test" src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGVuc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" >
Related
I'm trying to create an almost oval shaped image with CSS exactly like the following image:
I suppose I have to first create a bottom left triangle and then add another oval shaped div on top of it with the square image/picture to shape it.
I can't use js or SVG, only HTML, and CSS.
Here is an idea using clip-path
.box {
height: 500px;
width:500px;
background: url(https://picsum.photos/2000/1000?image=1069) center/cover;
-webkit-clip-path: ellipse(65% 86% at 66% 1%);
clip-path: ellipse(65% 86% at 66% 1%);
}
<div class="box">
</div>
Thank you for getting into this question.
i want to add a border/line that have one side incline that works as a divider between image and title. Below is the screenshot.
here is the html i have right now
<div class="entry-wrap">
<img class="x-img x-img-thumbnail" src="{image-src}" alt="Place Alt Text Here">
<div class="cut-border"></div>
<div class="x-recent-posts-content">
<h5>Title</h5>
</div>
Thank you so much for your effort.
Its possible using css, but it would probably be easier if you added that border in photoshop or something and insert it on your page
Note: The shape I use in these example does not match the one in the question. Mainly in that the shape on the question does not go down to the corner. Another difference is that I used a fixed height to define the "border" (it measures 5px vertically everywhere) while the one in the question seems to have a fixed width that takes into account the angle on the "stroke". These are details that make the construction of the polygons a bit more complicated, yet do not invalidate the presented approaches.
CSS Clip-Path
What you want can be done using CSS Clip-Path. Which, by itself will make the cut you want in the image, and also will make the cuts in the div that stands in for border.
Some tweaks are necesary to place the objects ontop of each other (clip path does not affect box sizing).
img {
width:250px;
height:250px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 75% 75%, 0 75%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 75% 75%, 0 75%, 0 0);
display:block;
}
.cut-border {
width:250px;
height: calc(250px * 0.25);
background-color: red;
-webkit-clip-path: polygon(75% 0, 100% calc(100% - 5px), 100% 100%, 75% 5px, 0 5px, 0 0);
clip-path: polygon(75% 0, 100% calc(100% - 5px), 100% 100%, 75% 5px, 0 5px, 0 0);
position:relative;
top: calc(250px * -0.25);
}
.x-recent-posts-content {
position:relative;
top: calc(250px * -0.5);
}
<div class="entry-wrap">
<img src="http://lorempixel.com/250/250/city/" alt="lorempixel"><div class="cut-border"></div>
<div class="x-recent-posts-content">
<h5>Title</h5>
</div>
</div>
One drawback I see is that it does not get pixel perfect cuts (you can see the pieces do not match perfectly, this deffect may or not be visible depending on zoom level). It is possible to hide it, I did not do any of that in the examples above.
Another drawback is that will not work in IE or Edge.
See browser support.
SVG
Instead of trying to solve this with CSS, we can have a stab at it with SVG:
.x-recent-posts-content {
position:relative;
top: calc(250px * -0.25);
}
<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="250" height="250">
<image xlink:href="http://lorempixel.com/250/250/city/" x="0" y="0" width="250" height="250" />
</pattern>
</defs>
<polygon fill="url(#img)" points="250,0 250,250, 187.5,187.5 0,187.5 0,0"></polygon>
<polygon fill="#f00" points="187.5,187.5 250,245 250,250 187.5,192.5 0,192.5 0,187.5" />
</svg>
<div class="x-recent-posts-content">
<h5>Title</h5>
</div>
See browser support.
I want to set a layer of transparent black color on an image like below.Tried in many ways.But nothing worked for me.Can i do it using CSS?
HTML:
<img src="images/slider1.jpg" alt="slider1" />
CSS:
img {
height: 634px;
width: 100%;
}
You can accomplish the same effect by overlaying your image on an element with the color you want, then setting the opacity of the image.
CSS:
#image {
opacity: 0.5;
}
#container {
background-color: black;
display: table;
}
HTML:
<div id="container">
<img src="http://i.stack.imgur.com/kmA5H.jpg" alt="slider1" id="image" />
</div>
Note the display: table. This causes the div to grow only to the size of its content, which is exactly what we want for an overlay effect.
Set the opacity of the image to 1 - x where x is the opacity of the overlay you want. For example, if you want a 30% opaque black overlay, set the opacity of the image to 0.7.
Check out this fiddle to see it in action: https://jsfiddle.net/145h44um/
logo_area
{
background-color: #d9e670;
filter:alpha(opacity=25);
opacity:0.25;
}
and another div:
#logo_image
{
background: url(../images/logo.png) no-repeat center 50%;
}
<div id="logo_area">
<div id="logo_image"></div>
</div>
Of course, logo_image is transparent too. Could I make it untrensparent in transparent block?
I don't think so. I am not sure if it's possible to bring it to 100% transparent if the container isn't.
However, what you can do is put it outside the block, such as:
<div id="logo_image"></div>
<div id="logo_area">
</div>
Then on the logo image block, add:
#logo_area
{
position: absolute;
height: x;
width: y;
}
So it should sit on top of the logo area div, but not be part of it. You may need to set the height of the logo area though, as the logo image will not cause it to stretch.
Let's say I want a way to display just the the center 50x50px of an image that's 250x250px in HTML. How can I do that. Also, is there a way to do this for css:url() references?
I'm aware of clip in CSS, but that seems to only work when used with absolute positioning.
As mentioned in the question, there is the clip css property, although it does require that the element being clipped is position: absolute; (which is a shame):
.container {
position: relative;
}
#clip {
position: absolute;
clip: rect(0, 100px, 200px, 0);
/* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
<div class="container">
<img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
<img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>
JS Fiddle demo, for experimentation.
To supplement the original answer – somewhat belatedly – I'm editing to show the use of clip-path, which has replaced the now-deprecated clip property.
The clip-path property allows a range of options (more-so than the original clip), of:
inset — rectangular/cuboid shapes, defined with four values as 'distance-from' (top right bottom left).
circle — circle(diameter at x-coordinate y-coordinate).
ellipse — ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
polygon — defined by a series of x/y coordinates in relation to the element's origin of the top-left corner. As the path is closed automatically the realistic minimum number of points for a polygon should be three, any fewer (two) is a line or (one) is a point: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
url — this can be either a local URL (using a CSS id-selector) or the URL of an external file (using a file-path) to identify an SVG, though I've not experimented with either (as yet), so I can offer no insight as to their benefit or caveat.
div.container {
display: inline-block;
}
#rectangular {
-webkit-clip-path: inset(30px 10px 30px 10px);
clip-path: inset(30px 10px 30px 10px);
}
#circle {
-webkit-clip-path: circle(75px at 50% 50%);
clip-path: circle(75px at 50% 50%)
}
#ellipse {
-webkit-clip-path: ellipse(75px 50px at 50% 50%);
clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
-webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}
<div class="container">
<img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>
JS Fiddle demo, for experimentation.
References:
clip — note: deprecated.
clip-path (MDN).
clip-path (W3C).
One way to do it is to set the image you want to display as a background in a container (td, div, span etc) and then adjust background-position to get the sprite you want.
Another alternative is the following, although not the cleanest as it assumes the image to be the only element in a container, such as in this case:
<header class="siteHeader">
<img src="img" class="siteLogo" />
</header>
You can then use the container as a mask with the desired size, and surround the image with a negative margin to move it into the right position:
.siteHeader{
width: 50px;
height: 50px;
overflow: hidden;
}
.siteHeader .siteLogo{
margin: -100px;
}
Demo can be seen in this JSFiddle.
Only seems to work in IE>9, and probably all significant versions of all other browsers.
Adjust the background-position to move background images in different positions of the div:
div {
background-image: url('image url');
background-position: 0 -250px;
}
div{
width: 50px;
height: 50px;
background: no-repeat -100px -100px/500% url("https://qce.quantum.ieee.org/2022/wp-content/uploads/sites/6/2022/02/QCE22-250x250-website#1x.jpg")
};
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>