Fiddle: http://jsfiddle.net/FtQ4d/1/
I'm doing a project for class, and I've made a webpage where there is a title in the center and two images of a left and right hand underneath. Upon hovering over one of the hands, it will move off of the screen revealing a link underneath. I've got the link hidden under the hands, but when the hand moves, the link is not clickable. How can I make it so?
Here are the relevant parts of the html and css:
<body>
<p id="rsm">(view my resume.)</p>
<div id="ind_wrap">
<p id="ind">INDEX.HTML</p>
<img src="r_hand.png" id="r_hand"/>
<img src="l_hand.png" id="l_hand"/>
</div>
</body>
CSS:
#r_hand{
background-image:url("rhand.png");
margin-top:-28%;
margin-left:50%;
height:100%;
width:35%;
animation:fr_bottom 4s 1;
}
#r_hand:hover{
animation:m_right 4s 1;
}
#l_hand{
margin-top:-52%;
margin-left:8%;
height:100%;
width:35%;
animation:fl_bottom 4s 1;
}
#l_hand:hover{
animation:m_left 3s 1;
}
#rsm{
margin-top:40%;
margin-left:20%;
position:absolute;
z-index:-1;
}
So, #rsm is the link underneath that is revealed when the left hand moves out of it's way, but it is not clickable. How can I fix this?
The problem is the z-index value on #rsm. On hover change it to more positive so that it is rendered above all others
As Arun mentioned in his answer, the z-index is responsible for this however a simple hover didn't work (I assume you don't want to use js).
Are you using Firefox or Chrome? This might be somehow related to your problem.
Also if you are centering elements please use margin: 0 auto; instead of manually tinkering with percentages to fit your screen size. I would also recommend you only use percentages for width not height as it may yield unexpected results on different screen dimensions.
Edit:
I hadn't realised the code in the fiddle is different from the one you posted. I also updated my answer.
Related
I have a scenario in which I have a team page with pictures and some blurb. Under each picture I have social media links much like the following:
These are images that sit within a horizontal list underneath each item using the below base markup.
<ul>
<li>
<a><img src=""/></a>
</li>
<li>
<a><img src=""/></a>
</li>
</ul>
At the moment these are images but I would very much like if when hovered the grey inards of these images turned blue.
I was thinking just have a span with a background image like this:
<a><span class="linkedin"></span></a>
.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}
.linkedin:hover{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture-blue-version)
}
However, when I attempted this the space was empty instead of taking the size of the image.
If I enter as content I get a small part of the background image, furthermore giving the class an absolute position takes it out of document flos
Is this the ideal approach?
The problem is if you use a <span> element you need to set it to display: inline-block and you need to set a width for the image to show up. Then it works, here is a demo:
.linkedin {
display: inline-block;
width: 140px;
height:100px;
background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}
.linkedin:hover {
background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}
<span class="linkedin"></span>
As you see on the first :hover it flickers. Cause it will not load the image bevore you :hover the first time. This is why you should consider another solution. Like mentioned in some comments you could use http://fontawesome.io/icons/ and then just change the color.
To prevent flickering you could do the same with using <img> tags then the source will be loaded and ready to be shown on :hover. But it works best with also setting positions, demo like so:
a.special {
position: relative;
}
a.special img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
a.special img:first-child {
visibility: visible;
}
a.special:hover img:first-child {
visibility: hidden;
}
a.special:hover img:last-child {
visibility: visible;
}
<a class="special" href="#">
<img src="http://ipsumimage.appspot.com/140x100,ff7700">
<img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>
Best approach for this is to use SVG's and change the fill of the SVG on hover.
Your approach should work however, it might be that you've not got the correct size image? try 'background-size: cover;' Or that the element has no width. Try setting a width on the span too. (don't forget to give it 'display: inline-block;' too.
Ed: checkout https://css-tricks.com/lodge/svg/
Font-Awesome is a great idea for what you're trying to achieve. Takes less data to load the page too if you can get away with using text in place of images.
By the way, when using the :hover property there is no need to redefine the width and height of the image... Just redefine the changes you'd like to make.
This code, from a Fiddle at http://jsfiddle.net/8gC3D/471/ in an answer at Tooltip with HTML content without JavaScript) should produce an image which, when hovered over, disappears and causes another element to appear elsewhere on the page. But it makes my browser behave unpredictably. Sometimes there is no effect on hover, sometimes a delayed effect, or the effect is only achieved with some additional movement of the mouse etc.
<style>
#img { }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;
}
#hoverme:hover { background-color:green;position:absolute ;left:300px;top:100px;width:40%;height:20%;}
</style>
<body>
<p id="hoverme">
<img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"> </img>
<span id="thistext">LOCATZ!!!!</span>
</p>
</body>
In trying to understand what was happening, by simplification etc (substituting the IDs for CLASSES etc had no effect), I lastly substituted a div, with a red background, in place of the Deviant Art image. The behaviour only became even crazier:-
<style>
.img {
background: red;
width: 50px;
height: 50px; }
.img:hover {visibility:hidden}
.thistext {font-size:22px; color:white}
.thistext:hover {color:black;}
.hoverme {width:50px;height:50px;
}
.hoverme:hover {
background-color:green;
position:absolute;
left:300px;
top:100px;
width:40%;
height:20%;
}
</style>
<body>
<p class="hoverme">
<div class="img"></div>
<span class="thistext">LOCATZ!!!!</span>
</p>
</body>
In my browser (FF) this generates a red square, on the LHS about 82px down the page.
1. Hovering over results in one of three behaviours: a) it disappears; b) it disappears and then reappears; c) the text "LOCATZ!!!!" is displayed beneath it.
2. Variously clicking or hovering on the red square or on the (invisible) red square's position, and then moving the cursor to the top left corner of the page, sometimes, makes the red square disappear, a red square appear in the top left corner, and a green rectangle 100px from the top and 300px from the left. These results seem unpredicatble/erratic.
What is wrong with the code and why does it so confuse the browser?!? I struggle to even get a repeatable behaviour.
UPDATE
Thanks, Joseph Marikle, good to know, but fwiw I'm trying to learn about hover and visibility funcionality rather than to implement the code from Fiddle. I have been fiddling with the code to try and do this but can't see what is "wrong" with it.
The rectangles are supposed to move down, the left then the right. But for some reason they just kind of "jump." Can someone please tell me why?
<!DOCTYPE html>
<html>
<body>
<style>
.imgbox
{
position: relative;
float:left;
text-align:center;
width:120px;
height:130px;
border:1px solid gray;
margin:0px;
margin-bottom:8px;
padding:0px;
-webkit-animation-name:drop;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;
animation-name:drop;
animation-duration:2s;
animation-timing-function:linear;
animation-play-state:running;
animation-fill-mode:forwards;
}
#-webkit-keyframes drop
{
0% {top:10px;}
100% {top:100px;}
}
#keyframes drop
{
0% {top:10px;}
100% {top:100px;}
}
</style>
<div class="imgbox" id="stuff1" style="-webkit-animation-delay:1s; animation-delay:1s"></div>
<div class="imgbox" id="stuff2" style="-webkit-animation-delay:2s; animation-delay:2s"></div>
</body>
</html>
Basically I just want one rectangle to undergo the animation and the next to do it as well, just slightly delayed. This is just an example, there is going to be many rectangles hence why I didn't just make separate divs.
Well, that's how things work in HTML - everything is in pixels, so when you're moving something, you can only move by X-number of pixels, or not move it.
You're moving your rectangles for 90 pixels for the duration of 2 seconds and there's just no way to make it smoother than it is.
However, if you're worried about that initial jump, it's because your element has a top value of zero, and when the animation starts it gets increased to 10 pixels right away, and then the animation continues. To avoid it, simply set their top property to 10px.
See it here: http://jsfiddle.net/adePY/
I've seen other answers, but none of them seem to work for me.
What I want: when I type the URL .../page.html#two to go to #two, but with a 50px offset from the top of the page.
note: ive added the big space and <a>'s because you can't type the url in jsfiddle. I want it to work with urls, as well as with links.
<body>
<section id="one">First section</section>
<section id="two">Second section</section>
<section id="three">Third section</section>
<div id="big_space"></div>
one
two
three
</body>
body
{
height: 2000px;
}
#big_space
{
height: 1000px;
}
section
{
height: 100px;
background-color: lightblue;
margin-bottom: 5px;
}
Here's a link to the JSfiddle: http://jsfiddle.net/hAmCL/
I have tried using the section:before but it seems to give the wrong result (i've commented it out in jsfiddle)
This is impossible to do with pure CSS as you want it, though there are some semi-work arounds
This approach only works in certain instances, but the trick is to use margin-top:-50px; padding-top:50px;. This makes the element appear in the same position except for the background will be 50px higher and pushed up 50px. Here's a demo of that approach
The second approach which I'd recommend more is one involving an added inner element. I decided to format each one like so <section id="one"><div class="reference" id="refOne"></div>First section</section>. Then you can point to the refence in the link, i.e. one. Then all it takes it the following simple CSS
section {
... Your other lines ...
position:relative;
}
.reference {
position:absolute;
top:-50px;
}
Demo. This approach leaves all of the elements the way they were before in performance and looks but requires slight additional HTML markup
It'd be nice to be able to reference element's pseuo-elements like you tried to do but I understand how it could be non-syntactically correct to do so
Fiddle:http://jsfiddle.net/FtQ4d/1/
I'm doing HTML and CSS for one of my classes, and I've created sort of a landing page for my project. I just want it to say INDEX.HTML on the top and have images of a left and right hand on the bottom of the page. I'm using CSS to animate the hands to move independently off the screen when hovered over and return in a few seconds. This is working somewhat well with the left hand, but when I hover over the right hand, both of the hands end up moving down. How can I fix this?
HTML
<html>
<head>
<title>Hand (Working Title)</title>
<link type="text/css" rel="stylesheet" href="handstyle.css"/>
</head>
<body>
<div id="ind_wrap">
<p id="ind">INDEX.HTML</p>
<img src="r_hand.png" id="r_hand">
<img src="l_hand.png" id="l_hand">
</div>
</body>
And here is my CSS:
body {
overflow:hidden;
}
#ind_wrap {
height:100%;
width:100%;
}
#ind {
font-size:1400%;
color:white;
font-family:Lazy Sunday;
text-align:center;
text-shadow: 3px 1px #000000;
margin-top:-2%;
}
#span_e {
color:black;
}
#r_hand {
background-image:url("rhand.png");
margin-top:-28%;
margin-left:50%;
height:100%;
width:35%;
animation:fr_bottom 4s 1;
}
#r_hand:hover {
animation:m_right 4s 1;
}
#l_hand {
margin-top:-52%;
margin-left:8%;
height:100%;
width:35%;
animation:fl_bottom 4s 1;
}
#l_hand:hover {
animation:m_left 3s 1;
}
#keyframes fr_bottom{
0%{margin-top:100%;}
100%{margin-top:-28%;}}
#keyframes fl_bottom{
0%{margin-top:100%;}
100%{margin-top:-52%;}}
#keyframes m_left{
0%{transform:rotate(0deg);margin-left:8%;margin-top:-52%}
100%{transform:rotate(-50deg);margin-left:2%;margin-top:100%;}}
#keyframes m_right{
0%{transform:rotate(0deg);margin-left:50%;margin-top:-28%;}
100%{transform:rotate(50deg);margin-left:52%;margin-top:100%;}}
There are problems with your HTML. The left hand is not REALLY to the left of the right hand, it just looks that way because the line wraps and the hand ends up on the next line. That's why you need margin-top:-52% for the one and margin-top:-28% for the other to get then to line up on the same vertical position on the screen. You should fix that first.
Also, since everything has vertical-align:baseline by default, the two images align themselves to each other's bottoms. That is, if one moves down, the other moves down too. But that is easily fixed by giving them vertical-align:top explicitly.
Now I fiddled a bit with your fiddle, but by the time I was done, I had changed so much, removed so much stuff unnecessary for the demo, that I'm not sure you can still use it. Here it is, just in case.
(I wasn't able to fix some of the problems though. If you hover the mouse near the top of the hand, it will slide down a little bit but then it will no longer be hovered over; and it will disappear from view because the other animation kicks in. The full slide down effect happens only when you have the mouse near the bottom of the window.)