How can I do this:
an image
a simple small DIV on top of the image, centered vert/horiz, which doesn't appear until the image is rolled-over
Try this:
<div style="position:relative;top:0;left:0;">
<img src="path/2/img.png" style="z-index:1;"
onmouseover="document.getElementById('hidden').style.display='block';">
<div id="hidden" style="display:none;position:absolute;z-index:10;"></div>
</div>
If it works for you, clean it up before you deploy it! :)
NOTE: div#hidden is not yet centered over the image. If you know the width and height of it in advance, you can use this method:
#hidden {
top:50%;
left:50%;
margin-top: -(heightOfHiddenDiv/2)px
margin-left: -(widthOfHiddenDiv/2)px
}
Otherwise you will need to get the computed values of width and height in JavaScript.
If you can have a fixed width and height for the <div>, then I’d suggest this:
HTML
<div class="hover_image">
<img width="250" height="300" src="http://pauldwaite.me.uk/images/professional.jpg" />
<div class="overlay">Hello!</div>
</div>
CSS
.hover_image {
position: relative;
float: left;
}
.hover_image .overlay {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 3em;
margin: -2em 0 0 -55px;
padding: .5em 5px;
background: #006;
color: #fff;
}
.hover_image:hover .overlay {
visibility: visible;
}
http://jsfiddle.net/ZKXgw/
You may need to add some JavaScript to make .hover_image:hover work in earlier versions of IE, which didn’t support :hover on anything except links.
If you can’t have a fixed width/height, it’ll be a lot tricker to achieve.
Things aren't really clear to me, any way you can play with the CSS/style of the element to work around on this.
To center an element you can set the top and left by 50% where its position is set to absolute. Then set the margin-top the half size of its height in negative, and the margin-left the half size of its width in negative.
To place the div in top of the image, its z-index must be higher than the image. But first the image must have the higher z-index until its not rolled-over.
To show the div on top of the image change the z-index of the image lower then the div. Using hover or onMouseOver event. There other ways of doing this, base on your needs.
See jsfiddle in action
You can use z-index property with absolute positioning to place the div on top of the image. Since you want this to be hidden, set the "display" property in css to "none".
The second part of your question can be accomplished by using a javascript function that you can call onmouseover [ http://www.w3schools.com/jsref/event_onmouseover.asp ]. All the function would have to do is change the "display" property of the element from "none" to "block".
Related
I have a glyphicon as such:
<div class="col-xs-4 col-sm-2">
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>
.glyphicon-large {
min-height: 260px;
font-size: 35px;
width: 1em;
display: block;
top: 50%;
margin: -0.5em auto 0px;
}
The glyphicon won't align to the center, vertically. When I open firefox, inspect element, and toggle off/on the top 50% rule, it suddenly works. How come?
Browser Bug Explanation
According to MDN on top:
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
Note: Percentage is applied as a percentage of the height of the element's containing block
According to W3 on top:
For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
Note: Percentages refer to height of containing block
Here's my guess:
I think what's happening is that when the browser is first rendering the visual tree, and sees top:50%;, it looks to the parent to set the height. Since no height has been specifically applied, and it has not loaded any child contents, the height of this div (and all divs) effectively starts off as zero until otherwise indicated. It then pushes down the glyph by 50% of zero.
When you toggle the property later, the browser has already rendered everything, so the calculated height of the parent container is provided by the height of its children.
Minimal, Complete, and Verifiable Example
Note: This doesn't really have anything to do with Bootstrap or Glyphicons. In order to avoid a dependency on bootstrap, we'll add top: 1px that would have been applied by the .glyphicon class. Even though it is overwritten by 50%, it still plays an important role.
Here's a simple set of parent/child elements:
<div id="container">
<div id="child">Child</div>
</div>
In order to simulate the toggling the property in a more repeatable fashion, we can just wait two seconds and then apply a style in javascript like this:
window.setTimeout(function() {
document.getElementById("child").style.top = '50%';
},2000);
Example 1 (jsFiddle)
As a starting point, let's recreate your issue.
#container {
position: relative;
/* For Visual Effects */
border: 1px solid grey;
}
#child {
position: relative;
height: 50px;
top: 1px;
/* For Visual Effects */
border: 1px solid orange;
width: 50px;
margin: 0px auto;
}
Notice that as soon as you resize the window, the browser will repaint the screen and move the element back to the top.
Example 2 (jsFiddle)
If you add top: 50% to the child element, nothing will happen when the javascript adds the property because it won't have anything to overwrite.
Example 3 (jsFiddle)
If you add top: 49% to the child element, then the DOM does have something to update so we'll get the weird glitch again.
Example 4 (jsFiddle)
If you add height: 50px; to the container instead of the child, then the top property has something to position against right from the get go and you don't need to use toggle in JavaScript.
How to Vertically Align
If you just wanted to know how to vertically center something consistently, then you can do the following:
The trick to vertically centering text is to set the line-height equal to the container height. If a line takes up 100 pixels, and the line of text online takes up 10, then browsers will try to center the text within the remaining 90 pixels, with 45 on the top and bottom.
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
Solution in jsFiddle
Tried centering a glyph icon that was inside an H1 tag, that was taking a while - so I discovered that you can actually change the font size and colour inside the SPAN tag contaning the glyph.
Thus:
<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span> Mes Messages</h1>
actually worked out for me.
Have you tried ? :
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span>
Basically, image is centered(I cant use absolute positioning because everyone has different screen resolutions and the image is centered) and I want my text to be 20 pixels down from top and 10 pixels right from left. How do I do it ? I have searched but got nothing. Probably due to my typing.
You have a couple of options. You're going to need to use a div the size of your image and center that. Then you can either set the image as the background of that div, or you can make the div position: relative and add an <img> tag that is positioned absolutely.
Here's an example of the first approach.
HTML:
<div id="imageContainer">
Some text that's overlaying the image.
</div>
CSS:
#imageContainer {
width: 275px;
height: 95px;
background: url('https://www.google.com/images/srpr/logo4w.png');
margin: 0 auto;
left: 0;
right: 0;
padding: 20px 0 0 10px;
}
And a JSFiddle to show it working: http://jsfiddle.net/VD34W/
Edit:
Since you want the text to be overlay you can use a hack using position: relative on the wrapping element and position: absolute on the inner ones. This allows you to position inside the wrapping element as long as the wrapping element has a width and height;
http://jsfiddle.net/FcBmd/1/
Irrelavent Text From Previous Answer: Something maybe using text-align: center
http://jsfiddle.net/FcBmd/
Take a look at this: http://css-tricks.com/float-center/.
Basicly it's only possible to align left and right but you can 'somehow' fake it.
you can try using the padding.
Try this:
HTML
<div id="theDiv">
<p>Some text here</p>
</div>
CSS
#theDiv {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvT90hfqXnsPUsrySmYtU2Hj1ypEwCq0muzSCKdxOSmUnZqp_Z);
width: 300px;
height: 300px;
}
#theDiv p {
padding-top: 20px;
padding-left: 10px;
}
Demo
Good question.
Basically you say how far down from the top and how far left.
position:relative;
left:10px;
top:-20
Tip: put both the picture and text inside a div so that the text is relative to the div.
Also checkout: http://www.w3schools.com/css/css_positioning.asp
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.
I have a footer div with 100% width. It's about 50px high, depending on its content.
Is it possible to give that #footer a background image that kind of overflows this div?
The image is about 800x600px, and I want it to be positioned in the left bottom corner of the footer. It should work sort of like a background image for my website, but I've already set a background image on my body. I need another image positioned at the bottom left corner of my website and the #footer div would be perfect for that.
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}
The image is set to the footer, however it doesn't overflow the div. Is it possible to make that happen?
overflow:visible doesn't do the job!
There is a very easy trick. Set padding of that div to a positive number and margin to negative
#wrapper {
background: url(xxx.jpeg);
padding-left: 10px;
margin-left: -10px;
}
I do not believe that you can make a background image overflow its div. Images placed in Image tags can overflow their parent div, but background images are limited by the div for which they are the background.
You can use a css3 psuedo element (:before and/or :after) as shown in this article
https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/
Good Luck...
No, you can't.
But as a solid workaround, I would suggest to classify that first div as position:relative and use div::before to create an underlying element containing your image. Classified as position:absolute you can move it anywhere relative to your initial div.
Don't forget to add content to that new element. Here's some example:
div {
position: relative;
}
div::before {
content: ""; /* empty but necessary */
position: absolute;
background: ...
}
Note: if you want it to be 'on top' of the parent div, use div::after instead.
Using background-size cover worked for me.
#footer {
background-color: #eee;
background-image: url(images/bodybgbottomleft.png);
background-repeat: no-repeat;
background-size: cover;
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
}
Obviously be aware of support issues, check Can I Use: http://caniuse.com/#search=background-size
Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;
<div class="home-hero">
<div class="home-hero__img"></div>
</div>
.home-hero__img{
position:relative;
top:-10px;
transform: scale(1.1);
background: {
size: contain;
image: url('image.svg');
}
}
You mention already having a background image on body.
You could set that background image on html, and the new one on body. This will of course depend upon your layout, but you wouldn't need to use your footer for it.
Not really - the background image is bounded by the element it's applied to, and the overflow properties only apply to the content (i.e. markup) within an element.
You can add another div into your footer div and apply the background image to that, though, and have that overflow instead.
This could help.
It requires the footer height to be a fixed number. Basically, you have a div inside the footer div with it's normal content, with position: absolute, and then the image with position: relative, a negative z-index so it stays "below" everything, and a negative top value of the footer's height minus the image height (in my example, 50px - 600px = -550px). Tested in Chrome 8, FireFox 3.6 and IE 9.
Can background image extend beyond div's borders? Does overflow: visible apply to this?
No, a background can't go beyond the edge of an element.
The overflow style controls how the element reacts when the content is larger than the specified size of the element.
However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.
Following up on kijin's advice, I'd like to share my solution for image offsets:
/**
* Only effective cross-browser method to offset image out of bounds of container AFAIK,
* is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
not possible to set a background image 'outside' it's element,
BUT YOU CAN DO what you want with using 'PSEUDO' element and make that whatever size you want and position it wherever you want.
see here :
i have set the arrow outside the span
here is the code
HTML :
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
strong text
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
see here example: http://jsfiddle.net/568Zy/11/
No, the background won't extend beyond the borders. But you can stretch the border as far as you want using padding and some clever tweaking of negative margins & position.
I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
I tried using negative values for background-position but it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.
After a little bit of research: No and No :)