I have a 2-by-2 grid of images arranged using float property in CSS.
I want to show a small overlay on each image when i hover over it, by switching its opacity from 0 to 1 on hover. My code works great when i hover the images in the top row.
But when I hover over the lower-row images, the overlay activated is still the one from the top row.
I think its an issue with positioning.
My code is here : http://jsfiddle.net/zZXZX/27/
PS : please dont mind the minor faults with the design.
You are positioning your overlay in absolute, without specifying a relative parent.
http://jsfiddle.net/tomprogramming/zZXZX/28/
position:absolute positions your overlay with offsets relative to its first parent that is not position:static, or if none are found, the document root.
.movie{
display:block;
float:left;
position:relative;
}
You need to add position:relative to your .movie class. position:absolute looks for its closest parent item that is not static position.
Add position:relative to .movie.
Related
I'm trying to position image on top of colored background as shown in attached image.
I've tried setting it's Z-index higher than other elements. Didn't worked.
Set other elements z-index lower than image Z-index. Didn't worked.
Here is the webpage: https://buyshroomsonline.ca/about/
This is the ID of the image (Girls with Phone). As you can see What I'm trying to make it come on top of all other elements.
#ctrlimg{
position: relative;
z-index: 10;
top:-160px;}
I've also tried setting higher Z-index. Please take a look and help me find what I am missing.
Thanks
Remove overflow:hidden from .vc_row[data-vc-full-width] but make sure do not remove directly from .vc_row as it may have a impact on other sections. so inherit or concatenate .vc_row[data-vc-full-width] with your custom class.
For Example
.yourClass.vc_row[data-vc-full-width]
Hi, I am trying to position two images next to each other and have one of them overlap the other one in a corner.
I have tried using the z-index property but this does not work unless i set the position property to something like fixed or absolute and this messes up the layout of my site.
I was wondering that although i have an image container with the width and height set, can i possibly cut out a section of the container like a rectangle to let the image sit inside the cut like the image below me.
Is this possible?
Thanks!
position:relative positions the element relative to its normal position, and pretends, for document flow, that the element is still there. See this example:
http://jsfiddle.net/GtJMF/
position: relative;
I can't see how having a position:absolute for this scenario would mess up your site.
Put position:relative on your "Image Container". Put position:absolute; right:0, bottom:0; on your "Cut out part" (assuming it is also in the Image Container). This will give you the exact effect you are looking for.
Positioning is relative to the containing positioned parent. Just a position:relative is enough make an element a "positioning master" that all interior positioning will use for its coordinate system.
position:relative also "enables" z-index, but unlike absolute and fixed it doesn't mess up any of the rest of the layout.
I have a div with which I display basic user information. The 'search-person' div has a height of 'auto'. This is so that profile pictures can be dynamic in size, up to 170px tall. Now, I would like to have a button displayed over the profile picture, and I thought to add relative positioning to the contents in the div and move it up and under the button, button it doesn't seem to want to work right. What can I do wrong?
here is my problem:
http://jsfiddle.net/C9Zj5/
#wrap {
position: relative
height: auto;
width: auto;
}
Make the #person-wrap position:relative and then the #buttons div position:absolute. That should give you the effect you're looking for.
div containing relative position should contain within another div having absolute position so that it can float correctly
If you set position:absolute to #buttons them you will have the button over the profile picture. Use left and top to positioning the button wherever you want inside #person-wrap.
I'm not sure what you mean with "and I thought to add relative positioning to the contents in the div and move it up and under the button", but if you want to show the info inside #person-wrap you can use position absolute or negative margin.
Aside: Is not a good practice to have div elements inside the link tag. Also why you need a button? Maybe you need to rethink the html structure as well ;)
I am attempting to make a thumnail viewer whereby when you roll your mouse over the thumbnail, you get a thumbnail sized view of a larger email. As you move around the thumbnail youll see various parts of the larger pictures.
You can see this here by rolling over the last (green) image.
When you roll over I swap images between the low res thumbnail and a higher res version. For some reason this larger image is no longer bound by the overflow: hidden property of the parent. What do I have to do to get this to work?
Update
The position: relative property is currently set on the parent above the .artwork container that currently provides the overflow: hidden. Adding overflow: hidden to the top level container works correctly but seems to negate the rounded border effect...
use position:relative on your parent block.
This is because our child div is absolute positioned. But when you use absolute position, it refers to the first positionned parent. The first positionned parent is the first one to have a position: relative (or absolute) property
for the border radius problem, this is a firefox and chrome bug you can fix by using hacks. See it here :
CSS3 border-radius clipping issues
EDIT : To summarize :
add position: relative to the div artwork. then add your border radius to the "a" parent tag
I have a div with a fixed position, but I want it to stay in the same position when my browser screen is increased or decreased in width. Since I have margin:auto acting on the surrounding html objects, it changes its position relative to the surrounding objects. I do not want this to happen. How can I fix this?
This is my css so far:
position:fixed;
top:45px;
left:930px;
Based on your third comment, I believe you might find my solution to a previous problem similar to this to be your solution: Position element fixed vertically, absolute horizontally.