I have 40*40px png with transparent background with a 30*30px circle in the middle.
I would like to use that png as a button with a simple hover effect, but i want the hover effect to take place only when the cursor is actually on the circle, not on the transparent background.
Is there a plain HTML+CSS solution for this? I tried to check it here and on other forums, but I didn't find anything.
Yes, you can do this with HTML and CSS. First create a circle element and place it before your image. Then wrap both your image and the circle in a container, like this:
<div class="container">
<div class="circle"></div>
<img src="your-image.jpg" />
</div>
Then, use position: absolute to position the circle on top of the image (align it with the circle that's in the image), and use the + selector to select the next adjacent element when the circle is hovered.
.container {
position: relative;
}
.circle {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #222;
}
.circle:hover+img {
border: 5px solid aqua;
}
See DEMO.
Check out this script if you need to activate hover/click only when mouse is within the circle (and not in the square bounding box) http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/
It’s not possible in CSS only, as all elements are treated as rectangles, even if they are rendered with rounded corners.
Related
I have an image element nested in a parent div. The parent has rounded corners and the image should adapt those. In case that the image doesn't load for some reason, a default background color should show. This is the general setup:
.parent {
border-radius: 10px;
overflow: hidden;
}
.child {
width: 100%;
height: 100%;
object-fit: cover;
background-color: red;
}
<div class="parent">
<img src="https://via.placeholder.com/150" class="child" />
</div>
I would expect the image to fill the entire container and not let any red color from the background show through, however the corners look like this:
As you can see, there is a thin red line visible at the rounded corners. This happens in Chrome and Firefox. How do I get rid of that and make the image properly fill the corners?
Bummer. You could transform: scale(1.05) as a way around it. Or put the image in the background of the parent. : /
I am trying to achieve an effect where I can diagonally crop an image in a way that is displayed below. I am aware of clip path as a solution but it would not be suitable in this scenario since it is not supported by certain browsers which are essential for this particular task. (IE and Edge)
Additionally, the cropped edge would need a black border which adds on to the complexity of what I am trying to do. Having searched for answers and coming up with anything, any suggestions would be appreciated.
Maybe you could overlay the image with a rotated element (div or something) that you give a border and white background. This solution would work if you're okay with a solid background color.
Another solution, depending on your requirements, could be to simpy use a .png image with transparency.
Yes you can, it's a bit tricky to get the sizes of the divs correct. But here's generally how to do it:
HTML:
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
<span>asdf</span>
</div>
</div>
</div>
CSS:
#content {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-60deg);
transform-origin: 50% 50%;
position: relative;
}
#content span {
position: relative;
top: 30px;
left: 30px;
}
#innerwrapper {
border-right: solid 3px black;
overflow: hidden;
width: 100px;
height: 100px;
}
#outerwrapper {
transform: rotate(60deg);
transform-origin: 50% 50%;
width: 120px;
height: 120px;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/ywfpeve8/
To explain this:
You have a div that contains the content itself. In this example it's just a span, but it can be anything. (I put it in to see that in the end everything is horizontal again)
You rotate that content div to some degree that suits you.
You place that div in a wrapper with a different size where you can position your content in. That div has an overflow: hidden, to crop all that content that is outside of the inner wrapper box. That wrapper then also has the border where you want the crop to be highlighted.
That inner wrapper is placed in an outside wrapper that rotates the same amount at the content div, but backwards, leaving you with the original 0 degree alignment of the content. This div again has overflow: hidden to crop that inner wrapper again so that you can hide the other "crop edges" that you want to be invisible. In my example code I didn't to the correct dimensions and positionings as it takes a bit to get right. But if you have an image with a white background, that shouldn't be very hard anymore to get things right.
Bonus: the background of the top-level element (that element that holds the outerwrapper can have any background at all and you won't see a rectangular box at the bottom right corner (for this example) as everything just happens with overflow: hidden and without bars that go over the content to hide it :)
I will attach an image with the effect I'm trying to achive using html and css.
Instead of the black color, I'll have an image, and I want to make an white overlay to give the impression of a round bottom. This could be done using an background image but I'd like to make this using css and keep that option as a last resort.
Setting 50% to border-bottom-left-radius and border-bottom-right-radius should give you the expected results.
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
div {
background-color: black;
width: 400px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div></div>
Something like this:
div {
background-color: orange;
width:500px;
height:200px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
overflow: hidden;
}
<div>
<img src="http://lorempixel.com/output/city-q-c-640-480-5.jpg">
</div>
This shape can be achieved by using 2 HTML elements.
We set the rectangular primary element to overflow: hidden.
The child element should be shaped as an oval (can be done via border-radius), and scaled+translated a bit so that it has only the bottom edge within the main element area.
Please try this jsFiddle.
This is Hapenning-
I need this-
I need to move the background image(orange circle) of my element outside of the element. Is it possible using CSS or Javascript?
Due to the structure of the HTML, I can not take another element inside the div. Need to doi it using :after only if possible.
.element:after {
display: inline-block;
content: "";
height: 250px;
width: 217px;
position: absolute;
border-bottom: 1px solid #ff9400;
border-left: 1px solid #FF9400;
z-index: 15;
background: url('files/images/icon5.png') no-repeat;
background-position: 100% 100%;
}
Just need to move my icon5.png outside of the box of element.
This is what you want to do. Define a background element which only contains your image. size it to whatever you need. and then you make a smaller element inside of it. The following is an example of what I mean:
<style>
#BACKGROUND {background: url("testimage.jpg");width:50px;height:50px;}
#OVERLAP {color:#000;padding:10px;}
</style>
<div ID="BACKGROUND">
<div ID="OVERLAP">
ABC
</div>
</div>
Here, I created a background (DIV) element that's 50 by 50 pixels and then inside of that, I created another (DIV) element specifically for text that overlaps the image starting at 10 pixels in as defined via the padding statement for the DIV with the ID of OVERLAP. if the image is still in the way after adjusting numbers, then you can edit the image to include white space and adjust the sizes (pixel values) accordingly.
I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/