I created a shape (a rectangle to be exact) and in this shape I wish to have an image overlapping its actual size (e.g the rectangle would be 400px by 400px and the image would be 600px by 600px).
Are there any ways of doing this? Here's a mockup of what I'm describing:
EDIT: To achieve this, simply use
z-index: 1;
position: absolute;
Thanks user acarlon.
I am not 100% sure what you are after, but it sounds like you want an image cropped to a container div.
What you want is overflow: hidden on the container div. See here for details.
You can also use clip. See here.
Update
Actually, it seems like you want one image to overlap another. In which case you want to use absolute positioning and z-index. See here.
Related
I'm trying to align horizontally two images that are next to each other with different dynamic text under it. If you review the image I attached it's pretty clear what I'm trying to do. I don't think flexbox properties like flex-end or flex justify-content: space-between will work here. Thanks for your help in advance.
https://i.stack.imgur.com/QYCMh.jpg
enter image description here
So I figured out a solution. I used calc() to achieve the results
position: absolute;
width: calc(100% - 50px);
margin-top: calc(112.1% - 980px / 25);
This calc keeps the image stuck to the image next to it. Not sure what the unit numbers mean, I basically fiddled with the units until I got the results I wanted.
Heres the result https://gifyu.com/image/vnPX
I'm looking for a way to place text under my images and want to keep it there when changing browser size (if possible make text bigger and smaller when doing so, but not necessary). When I use a div around an image the other images seem to disappear.
This is the link to the site:
http://www.noortjepalmers.be/portraits.html
Thanx.
You can add a div around each image, give it a class like "image-container" and then in your css you set
.image-container {
display: inline-block;
}
I am not very experienced with image sprites so here is the question..
I made an image sprite on the web; this is the code:
.sprite-slidebutton {
background-position: 0 0;
width: 70px;
height: 63px;
}
.sprite-slidecross {
background-position: 0 -113px;
width: 70px;
height: 63px;
}
The image I got, I downloaded to my page and I called the .png wherever wanted it. It does appear! And the sprite is working, the image is switching like i want it to..
But the PNG is not showing a transparent background :S also the image is not in the middle, I only see half of the both images.. where and how to adjust?
To see it live:
solved
If i had to guess i would say there is a problem with the alpha values in the image. Download gimp and see what they are.
the png probably has a white background, instead of a transparent background. that's something you will need to edit in photoshop, gimp or similar.
as far as only seeing half the image it might be due to the element you are assigning the class to. if its an inline element like <a> or <span>. try adding "display:block;" inside the sprite-slidebutton class.
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/
I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/