I have some markers over the top of a map and the goal is to have a hover effect over each marker to show additional information. I used an ID for the image and the following CSS:
#pan {
position: absolute;
display: inline-block;
}
#pan:hover:before {
content: url('http://devmg.redtogreendesign.com/wp-content/uploads/2014/08/PAN_Hover.png') no-repeat !important;
display: block;
position: absolute!important;
top: 50px;
right: -200px!important;
z-index: 9999!important;
}
Works great in safari! However, nothing happens in Firefox. Any help would be appreciated!
Do not use no-repeat inside content property. By specification no-repeat is not valid content property value.
If you want more image control use background property. Because of images or gradients inserted using content cannot be resized.
The problem here is you are using no-repeat on a content property. Just remove it.
#pan:hover:before {
content: url('http://devmg.redtogreendesign.com/wp-content/uploads/2014/08/PAN_Hover.png') !important;
display: block;
position: absolute!important;
top: 50px;
right: -200px!important;
z-index: 9999!important;
}
DEMO
Related
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 tried to v-align a image with a text in my link.
Until now I have used a background image to perfectly v-center the image of my text
CSS
.label {
margin: 0 0 0 15px;
padding: 0;
color: #fff;
}
a.moreinfo {
background: url(../images/gallery/add.png) no-repeat left center;
cursor: pointer;
}
HTML
<a class='moreinfo'><span class='label'>MORE INFO</span></a>
Now I want to try not to use background images, but insert an image in the html code (img src). I tried using vertical-align: middle, but the image is not aligned precisely like the one in the background. How could I do to get the same thing with an image included in the html code? thanks
Here is how you can center an element in another:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
You can find more in this link: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ .
I've found something like this to work very well for me:
a.moreinfo {
display: table;
width: 100%;
}
a.moreinfo span, a.moreinfo img {
display: table-cell;
vertical-align: middle;
width: 50%;
float: none;
}
When you vertically align while setting display to table, floated elements won't work as expected. The parent should have a set width or the default width will set to auto and, again, not work as expected.
I have this fiddle for reference that shows what i'm talking about...when you scroll the table of data within the div, the image scrolls as well. I need the image to not move while the below div is scrolled, but I cannot do it. The div that overlays could be any size and I would also need the overlayed image to be in the correct spot even if the window was resized. I suppose that if it can't be done with CSS then a javascript solution would suffice, but would of course much rather have css only.
thanks!!!!
http://fiddle.jshell.net/ts46235/BMKZa/26/
css:
div.overlay {
position: relative;
}
div.overlay:after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50% 50% ;
}
First, you need to move the overlay class property to a div containing your grid div (as an example your float-left clear-left div), so that the gif image do not scroll with the your table.
Then, you need to adapt your CSS code like this :
div.overlay:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 400px;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50%;
pointer-events: none;
}
The deal is that with top, left, width and height property, we create a box the same size as your grid div and at the same position. Then, with :before rather than :after, the image is display on top of the content of the table rather than behind. And finally pointer-events: none ensures that the image won't cause trouble when selecting text.
Here is a working Fiddle : ( Fiddle )
What I first suggested but didn't work as you wanted was :
div.overlay {
position: relative;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50% 50% ;
}
div.overlay:after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
I'm trying to learn how to use the :before and :after pseudo elements. I'm trying to add a black background to the bottom of the page as a sticky footer but it doesn't seem to be working correctly.
Basically I have a repeating image as the background of the HTML element and then I add an absolute div positioned at the bottom with a solid black background.
I'd just like to point out that this is a learning experiment and not really how I'd achieve the same effect but what I'm trying is working in Firefox but not in Chrome!
Here's my CSS:
html {
background-image: url('images/template/html-bg.jpg');
background-position: top left;
background-repeat: repeat-x;
background-color: #0e0e0e;
height: 100%;
position: relative;
}
html:before {
content: "";
display: block;
background-color: #000;
width: 100%;
height: 138px;
bottom: 0px;
position: absolute;
}
In FF the page is rendered as I'd expect but in Chrome the whole page is black... Any ideas, am I doing this wrong?
Your CSS should work as expected, as your pseudo-element should be drawn in the context of the initial containing block (the viewport, represented by the html element) anyway, which is exactly what Firefox is doing.
Your particular issue was reported as a Chrome bug, but it hasn't been addressed. As a workaround, you can apply your pseudo-element to body instead:
body:before {
content: "";
display: block;
background-color: #000;
width: 100%;
height: 138px;
bottom: 0px;
position: absolute;
}
Depending on your layout, you may need to either keep your html rule or change it to body as well.
I swear I've seen people add multiple background images to an element using the :after selector. For whatever reason, I can't get it to work. What am I doing wrong? Can anyone point me to a working example?
#el li { background:url(image1.jpg) top center;}
#el li:after { background:url(image2.jpg) bottom center;}
Thanks!
As Blender notes, there is some type of dom node added as content to the end of the element's content. However, you also need to provide some kind of content AFAICT to make it work.
<ul id="el">
<li>Hello world</li>
</ul>
#el li {
background:url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG) top center no-repeat;
width: 200px;
height: 200px;
overflow: hidden;
}
#el li:after {
background:url(http://www.gravatar.com/avatar/05a3a91994b86e4e45246b57b0ec3c7d?s=128&d=identicon&r=PG) bottom center;
content: " ";
display: block;
position: relative;
height: 500px;
z-index: -100;
}
http://jsfiddle.net/QhUsS/
:before and :after always need the following:
{
content: '';
}
With CSS3 it could be done by
#el li {
background: url(image1.jpg), url(image2.jpg);
background-position: top center, bottom center;
background-repeat: no-repeat;
}
You can do it, but I've never tried. :after seems to create an inline-like element after your element. You can try adding this CSS (no idea if it works):
display: block;
position: relative;
top: -200px;
height: 200px;
width: 200px;