I'm creating a hover effect so that when someone mouse-over's on an image scan lines appear, but can't get the damn overlay image to be the same size as the image.
Take a look at this fiddle: http://jsfiddle.net/number8pie/wwmPL/
Here's the HTML:
<div class="container">
<a href="#">
<div class="overlay"></div>
<img src="http://www.mainlymunros.co.uk/images/green%20square.bmp" repeat>
</a>
</div>
Here's the CSS:
.container {
position: relative;
max-width: 200px;
}
img {
width: 100%;
position: relative;
z-index: 1;
padding: 7px;
border: 1px solid #333;
}
.overlay {
display: none;
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
margin: 8px;
background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}
a:hover .overlay {
display: block;
}
If you hover over the green block you can see the scan lines overlap at the bottom, I want to remove this overlap.
The image is dynamic and changes size depending on the size of the browser size.
Anyone got any suggestions?
The problem is that you're giving it 100% height and 100% width but then you're giving it margin. You're telling it to be the exact size of it's containing a element, but then pushing it down a bit.
You need to add an extra container, remove the image's padding and border and assign that to the new container.
<a href="#">
<div class="image">
<div class="overlay"></div>
<img src="http://www.mainlymunros.co.uk/images/green%20square.bmp"/>
</div>
</a>
.container a {
display:block;
padding:7px;
border: 1px solid #333;
}
.image {
position:relative;
width:100%;
height:100%;
display:block;
}
img {
width: 100%;
position: relative;
z-index: 1;
}
.overlay {
display: none;
position:absolute;
z-index: 5;
width: 100%;
height: 100%;
background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}
Example: JSFiddle.
Your problem now is that your img isn't square. Being a rectangular image with greater width than height means it will fill 100% width but cut off part of the height. Make your image a square or give your overlay the same aspect ratio and this will work perfectly.
its padding property which creates overflow. so change the height of both image and .overlay
that will do.
fiddle :http://jsfiddle.net/wwmPL/2/
i hope this that solves your problem :)
Related
Empty div like this :
<div class="section" id="s"> </div>
will be at the size of the screen.
But if I put another empty div inside, this section div height will be 0, or it will be in the height of the child's content.
<div class="section" id="s">
<div class="Back"> </div>
</div>
will make this section height to be 0, unless I put something inside Back which will make the section height= openBack's content.
I need to set the section size to be the screen size no matter what happens inside it, and I couldn't.
CSS :
html {
height: 100%;
}
body {
min-height: 100vh;
}
.section {
height: 100%;
width: 100%;
}
.Back {
background-image:url("/images/bg.png");
width: 100%;
height: 100%;
background-size: cover;
justify-content: center;
align-items: center;
}
How can you set the section size to stay screen size constant ?
NOTE: I was answering the original question
You might want to try this:
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
would be able to cover parent div.
Check the following fiddle or snippet:
.hidden{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
background-color: rgba(254,204,254,0.5);
align-items: center;
flex-direction: column;
}
div.openBack {
position:relative;
border:1px dashed red;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div.openBack img {
flex-shrink:0;
min-width:100%;
min-height:100%
}
<div class=openBack style="width:100px; height:200px">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
<div class="hidden"></div>
</div>
Try below css -
.openBack{ position:relative;}
.hidden{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:9999;
}
To use an image as a background to a section or div, you don't want to include that image as an element. It's pushing the other elements around it out of the way, this is why the next div is pushed below it. And it would be more complicated than necessary to try to get that to behave well by using absolute position.
I would suggest attaching the image as the background-image to either your section's class or id, and remove the <img> element from the html.
either:
.openBack {
background-image: url("/folder/file.png");
}
or
#one {
background-image: url("folder/file.png");
}
You'll want to look up the properties of CSS' background-image to get it to scale and fit the exact way you want.
And you can't use number values at the beginning of IDs.
Hope this helps!
Thanks for all the answers, I found out that the solution was pretty simple (stupid).
The inner div closing tag was wrong <div> instead of </div> which messed up the structure.
Wish I had a tool to find such a mistake.
What I am trying to accomplish:
- create a pop-up div (fixed), centered in view
- this pop-up should be 60% height of the browser window
- the contents of the pop-up should be an image and a 'x' above the upper right corner of the image
- the height of the image should be maximal, considering it should be contained in the div together with the 'x'
- the aspect ratio of the image should be maintained
I tried the following code
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>
With CSS:
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
text-align: right;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
This code is not solving the problem, the image is not contained in the (yellow) div, as can be seen in the following screen shot:
http://www.michielvisser.nl/tmp/screenshot.jpg
How to contain the image in the div with maximal height for the image in the div and maintain aspect ratio?
SOLUTION 1: Remove the height and width from .pop-up and change height:100% in .image to height:60vh. That works perfectly. Apparently the child (img) will not adjust to the parent (div), but the parent (div) will adjust to the child (img). Sounds like real life.
SOLUTION 2: Essentially the problem arises when the window is resized (except in firefox). The solution can be to redraw the image after a resize, this solves the problem:
$(window).resize(function(){
$('img').hide();
setTimeout(function(){ $('img').show(); }, 1);
});
Your problems are:
You have an inline width and height set on your image, which is overriding the CSS styles for width and height on that image
The margin from your X is pushing the image down since the X is wrapped in a <p> tag.
You don't need object-fit at all.
The simple way to solve #1 is to delete the inline width and height from the image tag and leave it to the stylesheet.
Number 2 can be solved by wrapping the X in a div instead of a p, or you can use a pseudo element for it. I have taken the latter approach in the snippet below.
To solve #3, just delete the style from the stylesheet. (Having this property set in Safari actually messed things up for me.)
This snippet is tested in Safari 10.1.1. Note how the placeholder image is quite large by default (1000x800), but it only displays as big as it can per the parent div.
Edit: Based on your comments, let's revise this further so that we dictate the size on the image, and just let the wrapper take up the size of the image.
So on our image, in order to get it to be 60% as tall as the screen, we can do:
img {
height: 60vh;
width: auto;
}
Then, in our parent, we won't specify a width or height at all, but we can do display: flex just to make sure it is big enough to fit its contents.
body {
background: #333;
}
.pop-up {
display: flex;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: yellow;
}
.exit {
color: black;
text-decoration: none;
text-align: center;
font-size: 300%;
display: block;
position: absolute;
top: -50px;
right: -40px;
width: 40px;
height: 50px;
}
.image {
height: 60vh;
width: auto;
opacity: 0.7;
}
<div class="pop-up">
X
<img class="image" src="http://placehold.it/1000x800" alt="" title="">
</div>
I put the image above the P tag and added some CSS to .exit-button and .image
From here you can adjust padding and sizing of the elements.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
position: absolute;
text-align: right;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" />
<p class="exit-button">x</p>
</div>
I copied your code and edited it. Please tell me whether this is the output you wanted or not.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
padding-top: 30px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
margin-top: -50px;
text-align: right;
margin-right: 0;
font-size: 300%;
}
.image {
margin-top: -20px;
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" alt="" title="" />
</div>
Because of either needing to hardcode in the alignment of the image given the size or deal with weird convolution, I believe this is the best way:
Create a fixed overlay occupying the entirety of the screen, create a container of 60% height, align it in the center with flexbox and stick the image inside making it occupy the entire height. The aspect ratio will update automatically (only happens with height).
As for the button – give it absolute positioning and a right position of 0, and manually give the parent relative positioning (this is necessary).
<div id="popup">
<div id="container">
X
<img src="https://i.redd.it/gelilvo30mgz.jpg">
</div>
</div>
html,
body {
height: 100%;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
position: relative; !important // has to be specified for the children (anchor) to find the bound
height: 60%;
background: #333;
}
a {
right: 0;
position: absolute;
}
img {
height: 100%;
}
https://jsfiddle.net/L2nLjjxc/1/
I believe that's the least amount of convolution if you want it to be dynamic.
for clarity, see codepen: http://codepen.io/anon/pen/QyaLPb
I want to create an image with an overlay. The overlay should be the same size as the image, however because of the width: 100% and height: auto for both the .imagecontainer and img, they don't have the exact same height. The overlay now has a few pixels more height than the img. You can see the .imagecontainer has more height than the img inside (red background showing at the bottom). I need the imagecontainer and img to be responsive, so setting a fixed height is not really an option. How do I solve this?
HTML:
<div class="wrapper">
<div class="imagecontainer">
<img src="http://www.kleinewolf.nl/uploads/fancybox/8f5b7a59-32b7-4582-868b- e2ff1f3e41a2/2835832130.jpg">
<div class="overlay">
</div>
</div>
</div>
CSS:
.wrapper{
width: 400px;
padding: 40px;
}
.imagecontainer {
width: 100%;
height: auto;
overflow: hidden;
background: red;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.8);
display:none;
}
.imagecontainer:hover .overlay {
display:block;
}
If you're speaking of the red border below the image.
Add to your .imagecontainer img: display: block. That should solve the problem...
http://codepen.io/anon/pen/QyaWNE
Added line-height:0; to your container div. Images contained by parent divs usually tend to take margins from other elements, and line-height and font-size are usually a problem. Good luck!
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/
I found a nice tutorial for making my images enlarge (like a zoom effect) on hover. The main difference between my needs and a tutorial is that I want my all images contained in a single box like container. So when I implemented the tutorial I realize that part of the enlarged image gets cut off when you hover. The effect is constrained to the container. I would like a way for the zoom to go wherever it needs to go on the page. (So you can see the whole zoomed image)
Here is my implementation of the tutorial: http://mulnix.contestari.com/wp/example225/1.php
JSFiddle: http://jsfiddle.net/dsRAH/
Original Code
Remove the overflow: hidden and all other overflows,
than for your images containers DIV remove float:left; and add display:inline-block;
* {
margin: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
background: #000;
color: #fff;
z-index: 0;
}
.photos {
position: relative;
display: flex;
flex-flow: row wrap;
}
.photo {
box-shadow: 0 0 0 2px #444;
margin: 5px;
position: relative;
max-height: 200px;
transform: translateZ(0);
transition: transform 0.5s;
}
.photo:hover {
z-index: 1;
transform: translateZ(0) scale(1.6);
}
.photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-legend {
position: absolute;
bottom: 0;
width: 100%;
padding: 1em;
background: rgba(0,0,0,0.3);
}
<div class="wrapper">
<div class="photos">
<div class="photo">
<img src="https://placehold.it/200x150/0bf" />
<div class="photo-legend">TEST DESCRIPTION</div>
</div>
<div class="photo">
<img src="https://placehold.it/200x200/f0b" />
</div>
<div class="photo">
<img src="https://placehold.it/200x150/bf0" />
</div>
</div>
</div>
It's not perfect but it's a start. I changed the overflow:hidden; in the wrapper to visible. I also put your code into jsfiddle so people can tinker with it.
http://jsfiddle.net/m8FXH/
You can try to use z-index. An element with greater z-index is always in front of an element with a lower z-index. If you main container is not overflow:hidden than you can try this out.
here is an example where you can see how it works. Hope that is helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I would suggest giving your divs one of the following classes:
colleft for the ones that are at left column
colright for the ones that are at right column
rowtop for the ones at the top row
rowbottom for the ones at the bottom row
And then assign them the following properties
.colleft {
transform-origin-x: 0%;
}
....
transform-origin-x: 100%;
transform-origin-y: 0%;
transform-origin-y: 100%;
(respectively)
That will make the zoom go in the desired direction.
evan stoddard modified fiddle