I have a small issue with some code. I am trying to achieve the effect of image resizing done with css, in a small slider. The thing is that the image is only shown inside the frame it's into.
How can i make it work to display the image in it's full size?
The page i am trying to implement this is here, on the first slider.
Thank you!
img {
position: absolute;
transition: all 1s;
width: 30vh;
height: 30vh;
margin: 5vh;
}
img:hover {
width: 70vh;
height: 70vh;
margin: 15vh;
}
<img src="http://2.bp.blogspot.com/-AXkkbmFRErs/TjCZIWGawfI/AAAAAAAAAlk/lT8yTGBYh38/s1600/Rick-Roll3.png">
<br><br><br><br><br><br><br><br><br><br>
Hover over me, please!
Is this essentially what you are looking for?
Related
Hello I have some issues with a code. I'm trying to do the following. When OPEN POPUP is clicked this will make popup visible and it will cover the whole screen. When X in content is clicked this will close the content and make it will make popup invisible again.
I have achieved this using :target pseudo-class.
You can see the demo here: https://codepen.io/loganlee/pen/Jjdjzom?editors=1100
I have two problems. First, OPEN POPUP link is visible on top of screen and it is not covered by .popup. Even though I've done width: 100vw and height: 100vh.
.popup
{
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(black, .8);
opacity: 0;
visibility: hidden;
padding: 10rem 0;
}
Second, .popup__content is taller than .popup when height of screen is made really small. You can see both in the picture.
I think I've done something wrong with layout. Thanks.
Add these style to your code.. for your two issues.
.popup {
top: 0px;
left: 0px;
overflow-y: auto;
}
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I have the following CSS code for the #Wall div:
#Wall {
z-index:0;
position: absolute;
left: 50%;
top: 0px;
margin-left: -952px;
width: 1920px;
height: 1200px;
overflow: hidden;
}
This forms a wallpaper advertising image which is clickable. Unfortunately, the overflow function does not work and browser places a horizontal scroll for the right part of the image. How to fix this and hide the part of the image which should be seen only on higher resolution screens?
I fixed the problem by adding the overflow code in the body {}, too.
Thanks indeed.
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I'd like to create an infinite horizontal div. However, I have no idea about how to do it.
Can someone help me to do it using this code as a start point?
Please, take a look at this image to understand how this infinite horizontal div should be.
Thank you!
By "infinite" i am assuming you mean to the end of the wiewport/window. You could try an absolutely positioned element;
this will be an overlay, appearing on top of anything in normal document flow
html
<div id="line"> </div>
css
#line {
position: absolute;
right: 0;
margin-left: 100px;
left: 50%; /* seeing as content is centered, make margin-left start at center of page */
bottom: 10%;
height: 20px;
background-color: red;
}
Demo at: http://jsfiddle.net/PstWc/2/
You can use a 1px high div set to 100% width:
<div class="inf_line">
</div>
.inf_line {width: 100%; height: 1px; background-color: #333; margin-bottom: 10px;}
Example.
Might not be the most elegant way to do it, but it's a way.