I want to fit an image with his parent dimensions. I don't want to use the image as background because is not clearly for google whether the image is using for styling or for content propose.
Anyway, i found object-fit and seems to be what I need.
My big problem now is that object-fit and hover doesn't work together as I expected.
Here is my code:
<div>
<img src="http://cdn2.hubspot.net/hub/53/file-385992610-jpg/html-code.jpg" />
</div>
<style>
div{
width:200px;
height:100px;
overflow:hidden;
}
div img{
width:100%;
height:100%;
object-fit:cover;
opacity:0.5;
}
div img:hover{
opacity:1;
}
</style>
And here is my fiddle:
http://jsfiddle.net/jx0ntkmy/
Hovering several times you will see a distortion of image. I have tested in firefox and chrome. In chrome there is no problem, but in firefox it is.
Related
I have a site which IE and FF render correctly but Chrome and Safari do not.
Here is the HTML:
<div class="cover">
</div>
<div class="nav">
</div>
<div class="misc">
</div>
Here is the CSS:
.cover{
position:absolute;
background-color:#00c9f8;
z-index:600;
height:100%;
}
.nav{
width:100%;
position:fixed;
top:0;
z-index:500;
}
.misc{
position:relative;
top:100%;
height:80%;
min-height:300px;
width:100%;
padding:0;
}
It would be expected that .cover will fill 100% of the viewport, which all browsers render correctly; .nav will be fixed at the top, which all browsers render correctly; and .misc will sit just off the viewport, which IE and FF renders correctly but Chrome and Safari do not. Webkit browsers instead make .misc sit at the top as if it had position: fixed.
In the example above .misc represents .orbit-wrapper in the actual site. Also the same problem exists for .menu-box-row, in which position: relative is not rendered correctly.
Many thanks in advance for a solution!
Percentage values used with relative positioning have been an issue in Webkit for awhile. You should be able to find a workaround by changing the .orbit-wrapper's position to absolute and then tweaking the other elements' styles accordingly to account for the disruption in your flow. Good luck.
I'm trying to create in HTML5 a view made of div's that displays in the center of the page while the background is grayed out. Something like the Silverlight child window. I am having a horrible time trying to get this to work.
You can easily do it with some basic css like so. This is just the css part not javascript to animate it or toggle. But it should be enough to get you started.
CSS
.div {
position:absolute;
top:300px;
width:300px;
height:260px;
left:50%;
z-index:1000;
margin-left: -150px; /* negative half the width of the div */
}
.background {
background:#000;
opacity:0.5;
position:fixed:
width:100%;
height:100%;
z-index:999;
}
HTML
<div class="div">
My Content
</div>
<div class="background "></div>
this is to make the page centered with 900px width, you add this to your div element:
width:900px;margin-right:auto;margin-left:auto;
for the background, you need to add the following style to you body element
color:gray;padding:0px;margin:0px;
you have to include a width in order to center an element. margin-right:auto; margin-left:auto; will not work if you did not include a width!
I have the following code which works fine in all browsers other than IE.
<div class="hovertest">
<img src="myimage.jpg" width="200" height="100" alt="myimage" />
</div>
<br /><br />
<div class="test">test2</div>
jquery:
$("a").hover( function () {
$(".test").fadeOut();
});
css:
div {
width:200px;
height:100px;
background-color:#B22;
position:relative;
}
a {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
text-decoration:none;
}
The a tag is not spanning 100% width and height of the div. The odd thing is though, by removing the image from the div and only having the a tag in there, it works fine in all browsers including IE.
Does anyone know what might be happening to the a tag when there's an image in the div?
Use display:block and left:0; right:0; top:0; bottom:0 for 100% width and height.
See this http://jsfiddle.net/fliptheweb/RESTy/
Just use
$("a, img").hover( function () {
$(".test").fadeOut();
});
DEMO:
http://jsfiddle.net/a4GAW/3/
Update:
If you click the img, you can use this workaround
$("img").click(function(){
document.location = $(this).next("a").attr("href");
});
DEMO: http://jsfiddle.net/a4GAW/5/
Try removing the position declarations and use the image as a background for the anchor.
a {
width:100%;
height:100%;
display: block;
text-decoration:none;
background-image: url(myimage.jpg);
}
An anchor is an inline element, it will not accept height and width as is. Givingit a position effectively sets it to a block element, but it may have other effects too. Try this, see what happens :)
I have a problem with a site I am doing some maintanence on, the latest test version can be found here http://www.smithandgeorg.com.au/new/ If viewed in IE7-9 or Opera this page displays as intended, however in Firefox and Safari the menu is positioned so that it is against the left side of the screen (it's best seen rather than described).
The problem seems to stem from my use of positioning. The #content element is positioned position:relative; top:0px; left:0px so that when the #menu element (which is nested inside) is positioned position:absolute; left:0px it will be pushed right up against the left side of the #content element, as happens correctly in IE9 and Opera. However Firefox and Safari seem to ignore the fact that #content is positioned relatively and just push #menu up to the left side of the screen.
I tried to reproduce the problem in the simple page below, but everything worked as expected.
<html>
<body>
<div style="border:1px solid red; width:100px; height:100px; position:relative; left:0px">
<div style="border:1px solid black; width:100px; height:100px; position:absolute; top:60px; left:20px">
</div>
</div>
</body>
</html>
Any help would be greatly appreciated :)
Firefox usually ignores position:relative on table elements, but this can be fixed by adding display:block to #content:
#content {
position:relative;
top:0;
left:0;
display:block;
}
SO question/answer about position:relative
But I am struggling.
Code I have for css is:
#gallery img {
width:700px;
height:213px;
margin:0;
padding:0;
}
So I thought ...
#gallery img:hover {
width:700px;
height:213px;
position: relative;
z-index:10000;
background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center;
}
Would work, but it doesnt.
The image I am transparently overlaying on hover is:
What am I doing wrong.
I think I may have a corrupt css tag somewhere.
Any help appreciated.
Make the #gallery have a background image rather than having an image tag inside it... otherwise it'll be on top of the background. Then have another div inside it which has the :hover pseudo-class. If it still doesn't work, take out the word transparent.
Or you could not overlay the image and just swap the original image for the combined image?
Hello there
I think you misunderstood the mechanics of CSS:
The image itself is an object and the background specified goes behind it.
So you have to make the non transparent image the background and specify the transparent one in the src. However this won't suit your needs.
A workaround would with CSS would be troublesome, so i would suggest to swap the whole image with a css hover or javascript onMouseover or jQuery - get familliar with those since it's the proper way.
Fixed.
css:
#container { position:relative; width:700px; height:213px;}
.image { position:absolute; width:700px; height:213px; z-index:0;}
.overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;}
.overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;}
html:
<div class="overlay" ></div>
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div>