Hey this is my first ever question so I'm sorry if I get anything wrong.
I am trying to create a gallery using only HTML and CSS, so far I have got it all aligned and pretty much sorted. The problem is with the image enlarger on hover, when you hover over the enlarged image shows up on top of it's respective image but when you scroll down and hover over an image the enlarged image stays put and doesn't follow the picture.
I have tried playing about with the position property for both the image and the hovered image but I can't get it right. I still want the image to 'pop out' of the divs though.
I have the code pasted on the link below:
http://pastebin.com/fZxbKZEJ
Change the position: absolute; to position:fixed;. This will make the image popup relative to the view. Play with margin to get the alignment right.
For eg:
margin: 100px auto 0;
So,
.bigImage{
display:none;
position:fixed;
height:310px;
width:250px;
margin:100px auto 0;
border:2px solid #39F;
}
If you Just want the popup to follow the original image, do this
.bigImage{
display:none;
position:relative;
height:310px;
width:250px;
margin:-260px 0 0 -45px;
border:2px solid #39F;
}
Related
I'm creating an image slider, and I want the "previous" and "next" arrows to each take up half the area of the slider. Increasing padding or margins tends to shift the position of the arrow after I've placed it.
The closest solution I found is to use the :before pseudo selector as per this link. This will work well enough but I am open to other suggestions from the community, as the current approach feels a bit "hacky."
Using this approach, I am trying to set up each arrow to take up exactly half of the slider box, but I can't figure out how to keep these areas responsive to the window width.
Please view this fiddle and resize the window.
http://jsfiddle.net/amoeboar/avqjnfwt/1/
I want the clickable area halves to always take up half the slider window, and not reposition the arrows.
.prev:before{
position:absolute;
content:'';
top: -40%;
right: -235%;
left: -40%;
bottom: -120%;
outline:1px solid red;
z-index:40;
}
This doesn't work though. Firstly, setting negative percentages seems strange, and second of all, resizing the window does not preserve the shape and size of the clickable area like I am hoping. I want the left arrow to take up exactly half of the bounding box, and the right arrow to do the same.
Can anyone make a suggestion?
You don't need the ::before and ::after pseudo elements on the links; they only make things more difficult to maintain.
The real solution is to simply position the <a>s themselves to the screen areas where you want them, and to use padding inside each <a> to position the arrow.
.prev,
.next {
display:block;
position: absolute;
left:0; right:50%;
top:0; bottom:0;
text-decoration: none;
color: salmon;
font-size: 8em;
outline:1px solid red;
padding:70px 40px;
}
.next {
left:50%; right:0;
text-align:right;
transform:scaleY(-1);
}
That's all. Because the <a>s are already positioned absolutely, you won't need the z-index; they are already on top.
See updated fiddle.
By the way, you shouldn't use < in texts in HTML, use <.
So I'm working on my first website, I'm trying to make an image gallery that shows thumbnails of images and enlarges them when you hover over them, I made the sizes of the images 100px*100px through the html itself then I used this css code:
img:hover {
width: 100%;
height: 100%;
}
obviously I'm missing something because when the images are enlarged they move the other images inline away which causes glitches because then you're no longer hovering over it. I tried fiddling about with the z-index but it didn't work, I tried putting them in spans with hidden overflow but I faced the same problem, what should I do?
You can take the hovered images out of the flow of the document with absolute positioning.
img:hover{
width:100%;
height:100%;
position: absolute;
top:0;
right:0;
}
Be sure to set the position of the container to relative.
fiddle here
I have a logo link that's using a background-image (css sprite). All works fine, but when I try to add a 20px padding to the top of the link (to give it more space for user to click the link), the background image is not moving down. Here is my css:
a {
background-image:url("sprite.png");
background-repeat:no-repeat;
display:block;
height:70px;
width:70px;
padding-top:20px; /* give top of the link more click space */
}
And my html:
What am I doing wrong?
Edit: I think you guys are missing the original goal. My goal is to give the logo link more clicking space. If I use margin then the element link is pushed down, which does not give more clicking space like I originally wanted.
Padding won't affect the background-image. To affect the hit-area of the link, add padding and then change the background y-offset by the same amount, i.e.:
a
{
padding-top: 10px;
background-position: 0px 10px;
}
Here's a fiddle demonstrating the behavior
Try using the margin property as so
margin-top:20px
The PNG image is the sidebar, and the black part is the CSS background, the PNG's alpha seems to override the black box.
When I change the image's opacity, you can see the box continues through the entire image, but is still overridden and I double-checked the sidebar's transparency, but it's set up properly.
It does this on Google Chrome as well as Firefox.
Relevant CSS:
.sidebar{
background: url('side1.png') lightgray 10% 50%;
background-repeat: no-repeat;
background-size: 100%;
height: 600px;
width: 173px;
z-index:1;
float:left;
position:relative;
opacity:0.5;
}
.header{
background: black;
background-position: top right;
float:right;
width:100%;
height: 200px;
z-index:0;
position:absolute;
}
Relevant HTML:
<div class="sidebar">
<img src="images/pic1.png" class="icon">
</div>
<div class="header"></div>
This appears to be just a simple case of the division going back behind the floated content. Most people don't realize that just because there is floated content there, the division still expands back behind it all the way to the edge, like it normally would if the floated content wasn't there.
That division is taking up its maximum amount of available space like it is expected too. The floated content is only pushing the content, which at this point, there isn't any. Making your sidebar partially opaque, this issue becomes visible as you can see that box behind your image now. A quick fix, per say, would be to add a margin to the division to push it out from behind the sidebar, like so:
.header {
margin-left: 173px; /* The width of your sidebar */
}
Note, however, that you would have to apply this margin to the left side of all your block-level elements that need pushed out from under. So it would make sense to put all the right content into a single box that gets pushed out, to prevent confusion.
Edit: The reason your black background doesn't pull through on the sidebar image is that you're setting it's background to light grey here:
background: url('side1.png') lightgray 10% 50%;
This will put a light grey background behind the image rather than letting the transparent part of your image go through to whatever is behind it. Try removing it:
background: url('side1.png') 10% 50%;
See the jsFiddle example.
Take a lok at this site: http://www.naaf.no/fersking
If you hover the mouse over the three article boxes, you will see that both text and image changes.
I've placed the text in a DIV which floats above anothe div (image) with opacity set to 60%. But can anyone explain to me why the first article is approx 5px lower than the two other boxes? The first article is aligned with the bottom - it should be 5px higher up.
Here is the CSS for the text box:
#articleImageList .introText {
background-color:#000000;
color:#FFFFFF;
height:50px;
margin:0 2px;
opacity:0.6;
overflow:hidden;
padding:5px 20px;
position:relative;
top:-75px;
z-index:0;
}
Make all your images the same size. Resize /upload/Ferskingen/COLOURBOX1021676.jpg (the image in the first article box) so it´s 440x239px (like the other images, it´s 430x239 atm).
The image makes the div.articleImage higher then the other two hence makes your position: relative; bottom: -75px; not render the result you want (but it behaves right).
Or:
remove min-width in the #articleImageList img-selector in main.css line 439.