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.
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.
I am new to all of this and wanted to know how to enlarge my image when I hover over it.
So far I have tried this.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John's" />
<span>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" />
<br />St John's, Baldock
</span>
</li>
All this does is makes a small image and a large image. I don't know how to use css so if you respond please can it be in HTML code.
Also the HTML code that is coming up in the text box beneath is not what I have written and don't know how to change that.
Thanks for any help in advance.
Sarah
You should really look into CSS or Javascript as otherwise hovering is a near-impossible task. Heres what you can do:
First off, remove the span and use a class to identify the thumbnail.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="thumbnail" />
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" class="large-image" />
<br />St John’s, Baldock
</li>
</ul>
Now add some CSS, don't worry, it's rather simple. What we want to accomplish is that when you hover over the thumbnail, we display the larger image. So on hover, we hide the thumbnail and show the larger image. But since we're hiding the thumbnail, we can't hover on it, so we also want to keep displaying the larger image until our cursor moves away from it entirely.
<style type="text/css">
.enlarge .thumbnail + img {
display: none;
}
/* Hovering over the thumbnail, hide the thumbnail */
.enlarge .thumbnail:hover {
display: none;
}
/* Hovering over the thumbnail, show the large image and keep showing it when hovering over the image */
.enlarge .thumbnail:hover + img,
.enlarge .thumbnail + img:hover {
display: block;
}
</style>
The .enlarge select all elements with class="enlarge", the .thumbnail does the same for the class thumbnail. img selects every image element, and the + in the middle says to select any element that comes directly after the preceding, so the line simply reads: select any img element that comes after a .thumbnail element that is inside a .enlarge element. The :hover seems self-explanatory, but here goes anyway: a : selector is called a pseudo-selector and defines a state or meta element (meta elements are elements you can stylise but aren't really there, like ::before and ::after). Metas usually use a ::. There are other pseudo-states as well, like :active. The style that is defined here will only be invoked when that state is invoked. Its the easiest way to make a hover happen!
You can, however, do this with just one image as well:
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
It simplifies your styling a lot:
<style type="text/css">
.enlarge-image {
width: 150px;
height: auto;
}
/* Show full size on hover */
.enlarge-image:hover {
/* This can be any size you want it to be as well. */
width: auto;
}
</style>
A couple of notes on your code: first off, be aware you have typographic quotes (” compared to regular quotes: ") surrounding your image source. This can lead to issues. Second, an image size is always in pixels unless defined in %, so ommit px from your width and height.
.enlarge-image {
width: 50px;
height: auto;
}
.enlarge-image:hover {
width: auto;
}
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150" height="100" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
You should start learning css. It is the only way to fix it.
<head>
<style type="text/css">
.picture{
width : 150px;
height : 100px;
}
.picture:hover{
width : 200px;
height : 150px;
}
</style>
</head>
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" class="picture" alt="St John’s " />
</li>
</ul>
Figured it out, but now it looks rubbish. Anyone know how to hide the other photos when I hover and enlarge one photo as they just move around the larger photo.
That's what I have. I still cant post a photo of what it looks like. Also the last photo when you hover over it it flickers, is this my code or the size of the screen?
Above answer are correct. I am providing you some link which will help you.
http://cssdemos.tupence.co.uk/image-popup.htm
http://jsfiddle.net/4AM3S/
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/
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.
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.)