I want to zoom the picture on hover.
So, it works so far but the end result isn't what I want.
When the picture zooms, it stops on the left side of the containing div and enlarges to the right side.
I already found the direction property but with that I can only switch the side behaviors. Something like direction: all would propably work, but it doesn't exist.
What I expect:
What I get:
See the JSFiddle
I recommend pure CSS without any JavaScript and jQuery code.
Here is one way of doing it:
#container {
margin: 0 auto;
width: 800px;
height: 400px;
/*overflow: hidden;*/
position: relative;
border: 1px solid red;
}
#container img {
position: absolute;
margin: auto;
top: 0px;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
/*transition: all 0.5s ease;*/
}
#container img:hover {
left: -5%;
width: 110%;
height: 110%;
}
Add left: -5% to you CSS rule for img:hover.
See demo at: http://jsfiddle.net/audetwebdesign/Em7yu/
Related
Tried to make a website menu with three full screen background overlays, but background video (underlying) in that menu is shifted down. What is wrong with positioning markup?
CSS:
.videoContainer {
position: relative;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 1px;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: relative;
z-index: -5;
}
.videoContainer .overlay-vid-1 {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background: black;
opacity: 0.5;
}
P.s. - tried playing with z-index, position: and <div> reordering, but no luck.
P.p.s. - yes, i know, this is not the whole code, but system informer said that I can`t paste whole code, so there is a link to codepen, thank you.
You need to change the position of your video to position: absolute; because it's being pushed down by the .overlay-content. Try changing your CSS to look like this:
CSS
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: absolute; /* Change to absolute */
top: 0px; /* Set top to 0px */
z-index: -5;
}
Updated CodePen
I have a cover Image in an html page that is wrapped by a div.
The div size is always width:100% height:33%.
I want any arbitrary image to scale to fill without be stretched on any screen size and ratio.
My CSS looks like this:
.headerImageWrapper{
position: relative;
width: 100%;
height: 33%;
overflow:hidden;
}
.coverImageCentered{
min-width: 100%;
min-height: 100%;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
My problem is that the image size is not the mimimum possible that satisfy these conditions.
See the image to understand better
I'm an iOS developer, if you now how it works basically like the contentMode : scale aspect to fill
This is what you looking for.. you can test this solution on the device
http://jsbin.com/joxinizo/4
source code:
http://jsbin.com/joxinizo/4/edit
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.bgd {
position: relative;
width: 100%;
height: 33%;
overflow: hidden;
}
.bgd-cover {
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
overflow: hidden;
}
.bgd-cover-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 13%;
}
UPD: i updated my answer
UPD2:
I don't know if I get right your question, but you may try to experiment with background-size: cover (you won't need wrapper with this one).
I've got a modal style I'm using from http://tympanus.net/codrops/ but I've created a custom close button (.md-close) that I want to be truly fixed in the top right as the user scrolls the content of the modal window.
Code here: http://codepen.io/jeremypbeasley/pen/upzrB
Right now when you scroll, .md-close leaves the visible area, making it hard to close without scrolling up. How can I force this to stay put?
I realize this is something to do with the position property but I've tried every possible combination of the parents and children. Might this have something to do with the transform property I'm using?
Any help?
Full css i used :
or live : http://codepen.io/anon/pen/lynBm
.md-close {
position: fixed;
top: 3vw;
right: 3vw;
height: 50px;
border: 0px;
cursor: pointer;
width: 50px;
background: black;
text-indent: -9999px;
overflow: hidden;
display: block;
background: blue url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/120px-VisualEditor_-_Icon_-_Close.svg.png);
background-size: 100%;
z-index: 99999;
}
.md-trigger {
width: 300px;
height: 300px;
background: blue;
text-indent: -99999px;
margin: 100px auto;
}
.md-modal {
width: 100%;
max-width: 100000000000px;
max-height: 100%;
position: absolute;
top: 0;
left: 0;
transform: none;
backface-visibility: visible;
}
.md-content {
max-height: 100%;
overflow: auto;
padding: 10% !important;
}
.md-show.md-effect-12 ~ .md-overlay {
background-color: black;
}
I solved this problem by adding a max-height of 100vh to .md-content
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child
I've got two div elements in my webpage and I've included the CSS for the two elements.
#item-browsing {
width: 65%;
height: 500px;
float: left;
position: relative;
min-width: 915px;
}
#bill-information {
width: 315px;
height: 100%;
float: left;
box-shadow: 3px -3px 11px -7px;
}
When I re-size the browser for various resolutions the item-browsing element goes down. I've attached a screen shot of what I mean above.
How Can I fix this issue using CSS.
Thank you.
Give parent element of these two elements position: relative and change the following css related to #item-browsing.
#item-browsing {
height: 500px;
position: absolute;
right: 315px; /* or left */
left: 0;
top: 0;
bottom: 0;
min-width: 915px;
}
BTW, there are many posts based on this issue on SO.
Working Fiddle
Just put a wrapper around those two divs. like so:
#wrapper{
width: [your width];
clear: both;
padding: 0;
overflow: hidden;
}
#item-browsing {
width: 65%;
height: 500px;
float: left;
position: relative;
min-width: 915px;
}
#bill-information {
width: 315px;
height: 100%;
float: left;
box-shadow: 3px -3px 11px -7px;
}
Add a wrapper and set it's min-width with sum of width of both containing divs:
#wrapper {
min-width: 1230px;
}
Simplified demo
If the browser width is less than 915 (min-width)+315(width)=1230px the second div has no space on the right side.