I have the below two images one is a roll over image which displays another image
/* HOVER IMG */
.hover_img a { position:static; }
.hover_img a span { position:fixed; display:none; z-index:99;}
.hover_img a:hover span { display:block; position: fixed; top: 5px; width:800px; margin-left:140px;}
<div class="hover_img">
<img src="http://lorempixel.com/101/101" style="border : 0;" width="120" height="30"/><span><img style="border: 5px solid #000000;border-radius: 25px; width:800px" src="http://lorempixel.com/100/100"/></span>
</div>
the problem i have is that when moving off the original image, and moving to the roll over if you move fast enough when the mouse is over the roll over image it then stays and doesnt remove.
As the roll over image is quite large i am looking for a way in which if the mouse is over the roll over image then it doesnt show?
I got the hover image to disappear by messing around with the positioning of span image.
.hover_img
a:hover span {
display:block;
position: fixed;
top: 0%;
left: -100px;
width:800px;
margin-left:140px;
}
https://codepen.io/edubz/pen/jeBPKe
use padding-left instead of margin for 20px and also use left:120px to position your span element.
/* HOVER IMG */
.hover_img a { position:static; }
.hover_img a span { position:fixed; display:none; z-index:99;}
.hover_img a:hover span { display:block; position: fixed; top: 5px; left:120px width:800px; padding-left:20px;}
<div class="hover_img">
<img src="http://lorempixel.com/101/101" style="border : 0;" width="120" height="30"/><span><img style="border: 5px solid #000000;border-radius: 25px; width:800px" src="http://lorempixel.com/100/100"/></span>
</div>
I solved it by adding
onmouseout="document.getElementById('over6').style.visibility = 'hidden';" onmouseover="document.getElementById('over6').style.visibility = 'visible';"
and giving my span the id as above, it meant as soon as you mouse in and out it will show and hide the image, this solve the issues of the over image still showing when you mouse over it.
Related
.btngo:hover{
bottom:3px;
}
btngo goes up for 3px when pointer is over, but if pointer is just on the edge of btngo it starts flickering, i.e. goes up and down very fast.
Is there a way to prevent this?
This effect should not start before pointer is 3px inside of btngo.
This is because once the hover takes effect and the element moves, you are no longer hovering and so the hover no longer applies...and it loops.
A solution is to maintain the hover by giving the pointer something to hover over while the pointer is apparently no longer over the element.
This can be achieved by a pseudo-element positioned at the bottom of the element (since this jitter is only an issue when hovering from below)...and expand the height of the pseudo-element on parent hover.
div {
width:100px;
height:100px;
position: relative;
border:1px solid red;
margin:2em auto;
}
div::before {
content:"";
position: absolute;
width:100%;
height:3px; /* your proposed bottom position value change */
top:100%;
background:transparent;
}
div:hover {
bottom:3px;
}
div:hover::before {
height:6px; /* position value plus height */
}
<div></div>
No additional HTML, pure CSS solution.
A solution is to create a container on where you apply the hover effect and you avoid the flicker as this container will not move.
.container {
position: relative;
display: inline-block;
margin: 10px;
}
.btngo {
width: 200px;
height: 100px;
border: 1px solid;
position: relative;
}
.container:hover .btngo {
bottom: 3px;
}
<div class="container">
<div class="btngo">
text
</div>
</div>
I have an image and need to add the text "click to enlarge" underneath the image but can ony do this using CSS.
This is what I have so far, however, I cannot seem to position it properly. It seems to float to the right of the image. How can I get this to go directly under the image and to the left?
#main_image:after{
content:"click image to enlarge";
text-align:left;
position:relative;
left:0;
clear:both;
margin-bottom:10px;
}
Here is one way of adding the caption using pseudo elements.
Your HTML might look like:
<a class="main_image" ><img src="http://placekitten.com/300/200" /></a>
and your CSS could be:
.main_image {
border: 1px solid blue;
padding: 10px 10px 40px 10px;
display: inline-block;
position: relative;
}
.main_image img {
vertical-align: top;
}
.main_image:after {
content: "click image to enlarge";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: beige;
text-align: center;
}
Add the pseudo element to the <a> tag and then position it as needed.
I used absolute positioning but there are other options.
See demo at: http://jsfiddle.net/audetwebdesign/fQyhj/
Just add display: block: http://jsfiddle.net/fQyhj/4/
#main_image:after{
content:"click image to enlarge";
text-align:left;
position:relative;
margin-bottom:10px;
display: block;
}
I'm assuming that your #main-image is not the image itself, but some wrapper around it since you're seeing the text.
As a reference, pseudo elements do not work on "replaced" elements: http://www.red-team-design.com/css-generated-content-replaced-elements
You have to add another <div> to do that. See the Fiddle
I have used margin-top: -80px; to put the text on image.
My outer div is position:relative and inner div is positioned absolute.
I want to set my inner div center align vertically and thinking to use top:auto and bottom:auto but it is not working. Please advice me how it can be done.
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
position:relative !important;
}
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:auto;
bottom:auto;
right:0px;
}
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
You can use line-height:95px; in the outer div and vertical-align: middle; in the inner div like this:
div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
line-height:95px !important;
display: block;
}
div.header-search
{
overflow:auto;
border:0px dashed blue;
vertical-align: middle;
}
You can play with it here: http://jsfiddle.net/leniel/5Mm67/
If you want to horizontal align the content of the inner div, just add this in div.Right:
text-align: center;
Here's the result: http://jsfiddle.net/leniel/5Mm67/1/
the best way to achieve what you are after would be to remove the bottom:auto; style and replace the top:auto; with top:50%; . After that work out the height of the search bar that you are trying to center (say its 20px) and add a negative margin styles for half of its height, so if it was 20px the style would be margin-top:-10px;
your css would look like this:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height:20px;
margin-top:-10px;
right:0;
}
set .header-search to top:50% or bottom:50% then use margin-top:-(half of div height) or margin-bottom:-(half of div height); respectively. I also sometimes just simply use top:50% or bottom: 50% without the negative margins.
For example:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height: 500px;
margin-top:-250px;
right:0px;
}
So yeah, in this case you would have to set a fixed height.
Set in the div with position absolute: "top:50%;"
It will display the div a litle bit to low (top od the absolute div should be exacly on the 50% of parent height - relative div) but there are ways to go around this.
For example:
Do even one more div with position relative and move it higher with half of absolute div height (this doesnt look very nice in code) - You must know the divs height, if you dont you can measure the size in sth like jQuery and move div a litle higher.
Easiest way: Maybe try 45% instead of 50% (if its not pixel to pixel design).
Propably somebody has better solutions, if so I would like to see them to :)
This should work:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
right:0px;
}
Hie, there are several methods to vertical centering of div its done through the magic of CSS.... Here is the examples and it works fine i have tested... and it works fine.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Here is other methods click here to see complete reference
Hope, it will helps you. Cheers. !!
Try setting the inner div to margin: auto 0;
I want to change the image from normal to brighter when it's on hover, My code:
<div class="nkhome">
<img src="Images/btnhome.png" />
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.
You should probably create a CSS sprite and use background positions, but this should get you started:
<div>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
</div>
It will not work like this, put both images as background images:
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
Css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
<div class="nkhome">
<img src="http://dummyimage.com/100/000/fff.jpg" />
</div>
Live demo http://jsfiddle.net/t5FEX/7/
or this
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>
Live demo http://jsfiddle.net/t5FEX/9/
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
Exact solution to your problem
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
For image hover use below line in your css:
img:hover
and to change the image on hover using the below config inside img:hover:
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
See this link.
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
See example.
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}
Hi again, this time the problem is with css, I' have a custom object (black rectangle named container) that contains items (red rectangle), each item must contain a litle rectangle (blue) named flag. Until here everithing ok.
here is the css properties:
.container
{
overflow:visible;
position:absolute;
border:0px solid;
border-color:Black;
width:500px;
height:500px;
}
.Item
{
overflow:visible;
border:0 invisible;
position:absolute;
z-index:100;
margin-top:1px;
}
.Flag
{
position:absolute;
width:20%;
height:20%;
margin-left:80%;
margin-top:80%;
z-index:98;
opacity: 0.5;
}
And Here is my Html
<div class="Container" id="CondicionesMostrar" style="left: 0.31em; top: 0.31em; width: 84.75em; height: 44em;">
<div class="Item" id="I_Cond_1" style="left: 0.06em; top: 0.06em; width: 216px; height: 120px; border-width:thick; background-color:Black;" onclick="alert(Hello');">
<div class="Flag"></div>
</div>
</div>
The problem is when the size width is greater than height the flag appear out of Item like the image A and if the height is greater than width it appear as the image B. The Item might have different sizes, the tests was made in Firefox 10.0.2, chromre 17.0.963.79m and IE 9, all of them return the same result.
What is the current way to do this? There is anything bad on my css?
I'm using absolute positions because i need to populate Container with many Items.
There is an alternative to perform this task?
Very tks for your help.
on .Flag, remove:
margin-left:80%;
margin-top:80%;
and change it to:
bottom: 0;
right: 0;
Joseph is right, I'm only adding that if parent div you also should use left and top position.
.container
{
position:relative;
border:1px solid #000;
width:500px;
height:500px;
}
.Item
{
position:absolute;
z-index:100;
top:1px;
left: 0;
}
.Flag
{
position:absolute;
width:20%;
height:20%;
right:0;
bottom:0;
z-index:98;
opacity: 0.5;
}