is there a way to alter a background when you rollover a link? im making a degree show website and want a large sample image to appear in the background when you rollover the link of persons name. i have an image appearing, however its covering all the text and in a fixed position over the link. is there a way to do this so it just alters the background image and stays behind all the other text on the page?
heres what im working with
#hover_img img
{
display:none;
}
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
}
html
<div id="hover_img">LINK<img src="image" alt="" /></a></div>
thanks!
** fiddle http://jsfiddle.net/5yhsL/ **
Add z-index: -1 to the image on hover:
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
z-index: -1;
}
You can accomplish this by putting the text inside another element adjacent to your image element. Absolutely positioned elements will take dominance over their neighbors, and one way you can get around that is by assigning a value to the position property for subsequent elements.
Here is a jsfiddle I've whipped up:
http://jsfiddle.net/93mpW/3/
Related
This is for terms&condition kind of page where there is checkbox next to the term. I dont know how to change the checkbox shape and it still stuck as a blue square. Please help, thank you
I would update the style by applying a classname to the Checkbox and changing the CSS.
Something like:
// style.css
.ant-checkbox.foo span.ant-checkbox-inner {
background-color: hotpink;
border-radius: 50%;
}
// jsx
<Checkbox className="foo" />
i have problem with my page, when it reaches to 768X1024 a big space below my footer exist, i looked some answers here at stackoverflow but i can't find one. can you help to fix it?
here's my http://jsfiddle.net/craybac/pb0d6zda/5/
and here's the image problem:
![enter image description here][1]
Use position absolute instead of position relative
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
Use postion:absolute,solve your problem.
here is
fiddle link:
Still your problem is not solved.use the below css
html,
body{
height:100%;
}
use some id wrapper after body and close that tag in before closing body tag.
and add the below css.
#wrapper {
min-height:100%;
position:relative
}
Okay so I have these divs called "latestWorkTitle" which are positioned absolute and are placed on top of the corresponding image to show its title.
However, I can't get this properly to work. The titles don't show at the corresponding image and when I resize my browser window everything shifts and so on.
I tried creating this jsbin http://jsbin.com/uhoxef/1 with a part of my code to illustrate how it should look like and what is going wrong. Even all the titles go on top of each other in the code while they should be on top of the corresponding images... I'm just basically totally lost at this.
I think the HTML was confusing itself. I also made the thumbnail class the relative layer. HTML renders as we read, from left to right. So putting the title before the image causes the image to show on top and cover the text.
HTML:
<div class="thumbnail">
<a href="portfoliodetail.php?id=10">
<img src="http://www.hlnarchitects.com/img/plain_red.png" />
<div class="latestWorkTitle">title1</div>
</a>
</div>
CSS:
.thumbnail {
position: relative;
overflow: hidden;
float: left;}
.portfolioOverview img {
width: auto;
height: auto;}
.latestWorkTitle {
text-align: right;
font-size: 11px;
text-transform: uppercase;
background: yellow;
position: absolute;
padding: 6px;
top: 0;
left: 0;}
For this to work, each thumbnail class needs to be the relative start for each individual layer. So the thumbnail class is set to relative.
Any object set to absolute (.latestWorkTitle) within this layer will start from the top and left position of the relative object.
You'll need to adjust some details to taste but I hope this helps.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
I am trying to use sprite images
I have a very basic link
<td align="center">
<img alt="my alt text" src="/Assets/t/myImage.gif" />
</td>
I am struggling for a while, tying to change this and making it use an image in my sprite instead of the src
sprites are large images containing more than one graphic, which are used in CSS as background-image. They are placed as background on block elements which are also sized with CSS using Width and Height. Then, using background-position, the background image is placed where it should be. The image is cropped according to those coordinates and element size, and the rest is ignored (used for other element backgrounds).
For example you have pretty buttons, which have a normal state, a mouse hover state, and an active state (pressed). Just place all 3 images one below the other, in one single image file.
button {display: block; width: 100px; height: 50px; background-image: url(yourImage.png); background-repeat: no-repeat; background-position: 0 0;}
button:HOVER {background-position: 0 -50px;}
button.active {background-position: 0 -100px;}
This will also eliminate the situation when new background image has to be loaded when the state is changed, meanwhile leaving an ugly button for half a second.
Here's an simple example of using sprite images.
The basic idea is to use background image on a fixed sized element (in the example it's an a tag with width/height 20px). Then positioning the image using background-position to select the sprite you need. The :hover selector is used to pick yet another sprite when moused over. Normally you'd have multiple links all using a different sprite from the one image.
css:
a.sprite_button
{
background-image:url(toolbar.png);
width:20px;
height:20px;
display:inline-block;
}
a#button1 { background-position:0px 0px; }
a#button1:hover { background-position:0px 20px; }
html: