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);
Related
I have created an ID for my HTML body called #indexbody. I put a background image with CSS using background-image:url("hs2.webp");. Because I Have done it this way, is there a way to change the background opacity of my image without dimming the entire body?
CSS:
#indexbody{
background-image:url("hs2.webp");
background-size: 100% auto;
}
If you put the background-image on the before pseudo image rather than the actual body element you can set its opacity down without that affecting the whole body element.
Here's a simple snippet:
body {
width: 100vw;
min-height: 100vh;
margin: 0;
}
body::before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://picsum.photos/id/1015/300/300);
background-size: cover;
opacity: 0.4;
position: absolute;
}
<body></body>
There are many different ways to do this. One of the most common is using a pseudo-element. In this case, I used :after to create the background color overtop of the picture then used z-index to make sure my absolutely positioned text elements are layered ahead of the pseudo-element.
#indexbody {
background-image: url("https://dummyimage.com/600x400/000/fff");
/* background-color: rgba(0, 0, 0, .5); --> solution without using psuedo-element */
background-size: cover;
background-position: center;
width: 100%;
height: 500px;
position: relative;
}
#indexbody:after {
content: "";
position: absolute;
background-color: orange;
opacity: .5;
inset: 0;
}
p {
position: absolute;
color: white;
background-color: blue;
z-index: 1;
text-align: center;
}
<div id="indexbody">
<p>absolutely positioned element overtop, unaffected by opacity</p>
</div>
Using the :before or :after CSS pseudo-elements, you apply the div with a background image and set an opacity on it.
I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.
In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.
Simple code:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: auto;
height: 40px;
background-size: 319px 349px, auto;
}
<div id="nav1"></div>
And the problem is I don't want to show these 2 icons. I want to show only the first one:
How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.
It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
background-size: auto;
height: 40px;
width: auto;
}
i.icon1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
background-size: 319px 349px;
display: inline-block;
height: 40px;
width: 40px;
}
<div id="nav1"><i class="icon1"></i></div>
If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.
You would have to specify a width.
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
width: 40px;
height: 40px;
background-size: 319px 349px, auto;
position: relative;
}
#nav1:after {
content: "";
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: 232px;
height: 40px;
position: absolute;
z-index: -1;
}
<div id="nav1"></div>
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/
Using web-tiki's responsive square grid lay-out's I have made some responsive squares with background images and text on it as follows:
HTML:
<div class="square bg imgautumn1">
<div class="content">
<div class="table">
<div class="table-cell months">
VISIBLE TEXT
</div>
</div>
</div>
</div>
CSS:
.square {
float: left;
position: relative;
margin: 0.25%;
width: 50%;
padding-bottom : 50%; /* = width for a 1:1 aspect ratio */
background-color: #1E1E1E;
overflow: hidden;
}
.content {
position: absolute;
height: 90%; /* = 100% - 2*5% padding */
width: 90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.months {
font-size: 40px;
font-weight: 900;
}
.imgautumn1:before {
background-color: black;
}
/* For responsive images as background */
.bg:before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
content:'';
position:absolute;
top:0;left:0;
right:0;bottom:0;
}
.bg{color: #fff;}
/*CHANGE OPACITY ON HOVER*/
.bg:hover:before{opacity:0.2;}
Now I am trying to only make the background transparent, not the text.
While using the opacity: 0.3 property on the imgautumn1 CSS-class the image becomes transparent, but also the text in it. Other techniques like the one from this SO-answer with using a separate div for the background, or a technique with using the :after element from here for the background plus opacity make the positioning of the background go wrong (i.e., image not centred) and I find it hard to implement. Another possibility might be to place a transparent div square on top of the image, but I don't think that is possible with the background-image property.
I hope someone here can provide me with some help on how to only make the background transparent and not the text.
JSFiddle: http://jsfiddle.net/L7m5psrm/
Seems to work fine if you use the :after/:before solution (setting the image as the background)
You just need to make sure you apply the same background properties.
.imgautumn1:before {
background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/* For responsive images as background */
.bg:before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
content:'';
position:absolute;
top:0;left:0;
right:0;bottom:0;
}
Demo at http://jsfiddle.net/L7m5psrm/2/
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;
}