I want to crop an image edge to set that edge transparant. I have used png to set to that edge when the background color white. But when it use for other backgrounds that white edge is there. So I want to know how to crop that image edge.
Here's the CSS for the styling
.cover-left-2 .avatar:after {
width: 38px;
height: 22px;
background-position: -47px bottom;
}
.avatar:after {
content: " ";
display: block;
position: absolute;
left: 0;
bottom: 0;
opacity: 0.9;
filter: alpha(opacity=80);
pointer-events: none;
background: url(../img/photo-corner-sw.png) no-repeat left bottom;
background-image: url(../img/photo-corner-sw.svg);
}
The image.
I found a jquery plugin call polycrop. You just need to add jquery to the page and add polyclip property to the element (the image you want to crop).
<img src="http://lorempixel.com/200/150/people/1/Nishan/"
data-polyclip="0,0,199,0,199,151,50,150,0,97">
That's it!
The image looks like this after cropped
jsfiddle example : http://jsfiddle.net/rb73hc53/
Related
Let's assume I have a button with an image inside it. Upon clicking the button, I want the background to fade out and I want a different image (similar to the button image but more modified) to show in bigger proportions. I want the image to pop up in the centre of the website and I don't want it to take up the entire space of the website - showing the faded background.
P.S. - The button image and the modified image are in two different files, and upon clicking the button, the modified image is displayed. The button has the button image file displayed as an img inside it.
You could use the before and after pseudo elements on the button to hold the two images.
This snippet puts the first image as the background to the before pseudo element and the enlarged one as the background to the after pseudo element.
The after pseudo element has opacity 0 until the button is clicked and the before pseudo element gets opacity 0 when the button is clicked. And these are reversed when the button is clicked again for this demo - it depends on exactly what you want as to what Javascript you will want to put here.
Just for the demo the change in position and the sizes are transitioned along with the opacities to get the fade effect. You could of course have the larger image shown instantly by having the transitions only on the opacities - it depends on what you need.
button {
left: 0;
top: 0;
width: 15vmin;
height: 10vmin;
position: relative;
background-color: transparent;
transition: 1s;
}
button::before,
button::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: cover;
transition: 1s;
opacity: 1;
}
button::before {
background-image: url(https://picsum.photos/id/1015/300/300?grayscale);
}
button::after {
background-image: url(https://picsum.photos/id/1015/300/300);
}
button::before,
button.clicked::after {
opacity: 1;
}
button.clicked::before {
opacity: 0.5;
}
button::after {
opacity: 0;
}
button.clicked::after {
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 50vw;
height: 50vh;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
button.clicked {
left: 50vw;
top: 50vh;
transform: translate(-50%, -50%);
width: 100vw;
height: 100vh;
}
<button onclick="this.classList.toggle('clicked');"></button>
I am having a problem with creating a hover effect with a PNG image and CSS. As the image below shows the image is a triangle notch. I am trying to make the background color extend left from the image and not overlap it as is happening in my example.
Hover Background and Image
.parent-1:hover, .parent-2:hover, .parent-3:hover {
background: #993408 url(/images/brown-notch.png) no-repeat right;
background-size: contain;
position: relative;
padding-left: 10px;
color: #fff !important;
z-index: 1;
}
Is there a way to make the background end where the image starts, so it becomes an arrow and be responsive?
I attempted this but it does not work responsively:
.parent-1:hover::before, .parent-2:hover::before, .parent-3:hover::before {
content: '';
background-color: #993408;
background-position: left;
position: absolute;
display: block;
left: 0;
z-index: -1;
font-size: 1rem;
width: 96%;
height: 100%;
}
Assuming your image is 10px set the width on your :before elements to:
width: calc(100% - 10px);
I'm trying to make an image that changes into another image when hovered over that also scales based on the size of the browser.
The css code I have so far is this:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#a_Cscaleskb{
width:0px;
height:0px;
background:url('../images/a_Cscaleskb_up.gif');
padding:47px 114px;
}
#a_Cscaleskb:hover {
background: url('../images/a_Cscaleskb_over.gif');
}
with the html:
<img id="a_Cscaleskb" src="../../images/a_Cscaleskb_up.gif" alt="" />
This works great for changing the image on hover but when I shrink down the browser it doesn't change.
Another piece of code I've tried is this:
#a_Cscaleskb{
background:url('../images/a_Cscaleskb_up.gif');
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
}
#a_Cscaleskb:hover {
background: url('../images/a_Cscaleskb_over.gif');
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
}
This css scales properly upon hovering, but you can see both images laying over each other. I know it's also possible to use javascript but I'm trying to avoid using it. Any suggestions are greatly appreciated.
If you want to scale your images according to browser size then use this sneaky bit of code:
img{max-width:100%;width:auto;height:auto}
that's what i've used in my gallery page in www.busyfeet.rachelgallen.com - give it a look and see it in action
I have an app that displays album covers in a carousel. When an album is centered on the carousel it gets a class of sc-selected. I've assigned a play button image as the background on sc-selected, but it is hidden behind the album image and thus invisible. Not sure how to fix this...
You can see it here: http://lifemusic.cc/
<li class="sc-selected" style="-webkit-transform-origin: 50% 175px; -webkit-transform: translate(320px, 0px) scale(0.9999999918937683) translateZ(0px); opacity: 0.9999999918937683; z-index: 3;">
<img src="http://userserve-ak.last.fm/serve/174s/92659171.png" class="album-cover sc-image">
</li>
CSS:
.sc-selected {
background: url('../images/playButton.png');
background-repeat: no-repeat;
}
You can use the ::before psuedo element to overlay the play button in separate element without adding any more html.
.sc-selected::before {
content: ' ';
display: block;
position: absolute;
height: 100%;
width: 100%;
background: url('../images/playButton.png') center no-repeat;
}
Try this:
.sc-selected {
background: url('../images/playButton.png');
background-repeat: no-repeat;
z-index: 99999999;
}
I have a background image of many colors. Header is a white box and i need to write text over this box. So what happens is through this box, text is clipped and background is seen through this white box. How to do this?
You cab do that with background clip: text, but you have only support in webkit
CSS
body {
height: 100%;
background: linear-gradient(0deg, red,white, blue, pink, yellow, green);
}
h3 {
background-image: inherit;
-webkit-background-clip: text;
color: transparent;
font-size: 80px;
top: 0px;
position: relative;
margin-top: 0px;
padding: 0px;
}
h3:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: white;
z-index: -1;
}
fiddle
Simply use this css code on box:
#box_over {background-color:rgba(255,255,255,0.1);}
Where is 0.1 there is background opacity. You can increase or decrease opacity.
I got your point! Its simple! You can do this with images.
Imagine there is a background colors, and you simply put another div style with image which contains white background with see-trough text! Use photoshop ;)
And also, check this css3 how to do multiple backgrounds in one div:
#box_over{
background:url(clipped_text.png), url(background.png);
background-size:100% 100%;
background-repeat:no-repeat;
}