I've been trying to place an image over a div, my div is
.my_box{
position: relative;
left: 200px;
width: 200px;
height: 200px;
background-color: white;
opacity: 0.7;
}
and then my image is
.asvp{
position:relative;
left: 300px;
top: 100px;
}
When I do this is puts the image under the div, what do i do in order to place it over the div? I know to put the image into the div but that will but the opacity onto the image which I dont want.
Try adding z-index:1 to .my_box and z-index: 10 to .asvp. Hard to peg without the HTML code though. If this doesn't work, please create a jsFiddle and I'll sort you out. :)
You should also use margins instead of left and top. For example, on .asvp remove left and top and put margin: 100px 0 0 300px;. As a general rule of thumb, I only use left, right, top, bottom on absolute elements.
why dont you give your image position:absolute; instead... that would automatically put it ontop of it
Instead of repositioning, you can keep the image inside the div without its opacity effecting its contents. If it's a solid semi-transparent background like in your example, you could use rgba value on the div like this:
background-color: rgba(255,255,255,0.7);
This and other options here:
https://stackoverflow.com/a/6780462/2909501
Related
In my angular project I have following task to do.
This is just a design template, not my actual code.
So far I have made the right picture by having a div and setting the background image.
But now I dont know how to put a dark layer on the page (like on the left side). The logic is no problem, but I dont know how to achieve it with CSS.
How do I do it?
You can do this really simply let's suppose you have a div and you can style according to following rules, you can also replace with your element id or css class with div:
div{
position:relative;
}
div:after {
position: absolute;
background: rgba(0,0,0,0.3);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can put a div over your image and style it the way you want it to.
If you make it black and put opacity on the element, it will get more transparent, which makes it look like its a little darker
Note that you will have to have the z-index set accordingly for it to work.
example:
overflow: hidden;
height: 100%;
z-index: 2;
Alternative you could try to add a shadow with background: linear-gradient()
example:
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
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 :)
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 an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap
I'm trying to build a website header that is semi transparent, and contains a semi transparent image that hangs outside the of the header div, like in the image linked below.
Because of overlapping opacities, I can't simply put a semi transparent image in to a semi transparent div and add a negative margin to the image. The best I could come up with was taking the height of the header image, and cutting that bit of the logo image, like in image attached. However that's not ideal, as doesn't play nice responsively etc etc.
Any ideas of how I might achieve this look?
Thanks in advance.
If you know the height of your menu then you can place both the logo and the menu inside of a container. Then position the logo with the top value equalling the height of the menu.
.header-bg {
background: rgba(225, 225, 225, 0.5);
position: relative;
height: 60px;
}
.header-bg .logo {
width: 90px;
height: 90px;
background: rgba(225, 225, 225, 0.5);
position: absolute;
top: 60px;
left: 10%;
}
See this fiddle: http://jsfiddle.net/3kxBt/1/
Hope that helps in some way.
This is an interesting problem and there are a couple ways to solve it; two come immediately to my mind.
The first is your method; carefully position things so that you don't have multiple translucent sections overlapping. This wouldn't be too difficult; if you go with this method I would recommend breaking the header into sections left and right of the image and using absolute positioning.
The second and easier way is to create a version of the picture with the semi-transparent white overlay you desire already applied. Then you can use that as the background for the menu and image. The only tricky thing here is you have to make sure the images line up by either using fixed positioning or calculated pixel offsets. This approach has been around for a long time and you can see any early example (2001-ish) of it here.
My take on it is to create a :before pseudo-element. It has its problems, including what if the logo changes in size at some point, but overall it works.
HTML
<a class="logo" href="#">
<img src="https://example.com/logo.png" />
</a>
CSS
nav a.logo {
position: relative;
...
display: inline-block;
line-height: 0.0001em;
font-size: 0.0001em;
}
nav a.logo img {
position: relative; /* for z-index issues. giving the image a relative
position automatically will place it above the
absolutely positioned :before element. This is
because the before element is rendered before the
image */
}
nav a.logo:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 71px;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
...
}
Demo: http://jsfiddle.net/ZP6LQ/1/show
Source: http://jsfiddle.net/ZP6LQ/1/
You can use rgba color format for background of both the .logo and the header to achieve your desired effect. However, you have to give position: absolute; to your .logo class because it needs to come right below the header. If you put your .logo on top of your header, then colors will overlap and won't look right. So, it needs to starts at the bottom of the header.
The header should have position: relative; so that your .logo is positioned relatively to the header. This way, you don't even need to know the height of your header because when you define top position of your .logo, you can simply use top: 100% so that it always starts right below your header. You don't have to hardcode that top value.
Now, you need to shift your actual logo (image) inside your .logo on top because its appearing below the header right now. For that you can simply push the image by giving it negative margin-top value.
SEE THE DEMO
The code would look like this:
HTML
<header>
<h1 class="logo">
<img src="/image/path" alt="logo">
</h1>
</header>
CSS
header {
background: rgba(255,255,255, 0.7);
position: relative;
}
.logo {
position: absolute;
top: 100%;
background: rgba(255,255,255, 0.7);
}
.logo img {
margin-top: -50px;
}