Threaded Mode | Linear Mode

170 · 05-23-2014, 06:16 PM

does anyone know where i could get a html code for hovering over an image and getting links? i dont want a drop down or slide out menu

like when you hover over the sidebar images here: http://flxourish.tk/

thanks xx

HueyTlatoaniAztec · 05-23-2014, 06:29 PM

You'll need to use CSS for most of it.
You'll need to set your display for the text to none and then with the :hover selector to display it as a block for example.

So, say you set the above as a class and typed the text as a paragraphtag, the code would be (very basically summarised) :

.hovertext p{display:none;}
.hovertext p:hover {display:block;}

HTML wise the elements would be for example :

<span class="hovertext"><p>YOURINFO</p></span>

Karthik Devaraj · 05-23-2014, 06:46 PM

Kaitlyn,

Its using HTML5 coding. It will not support all major browsers. It will support IE 10+, Google Chrome (Latest) and Firefox (Latest). Bcoz, its using transition effect

Extract the code from the above said link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css">
div#sidebar1{
width:170px;
height:146px;
border:0px solid #ddd;
position:fixed;
margin-left:205px;
margin-top:180px;
overflow:hidden;
z-index:9999999999999999;
-webkit-animation:fadeIn .8s;
-moz-animation:fadeIn .8s;
-ms-animation:fadeIn .8s;
}

div#sidebar1 img{
width:166px;
height:146px;
opacity:0.9;
}

div#sidebar1 #no{
width:166px;
height:146px;
opacity:1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

div#sidebar1 #no img{
width:166px;
height:146px;
opacity:0.9;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

div#sidebar1 #no #lol{
height:166px;
width:166px;
padding-top:5px;
background:#ccc;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}
div#sidebar1 #no #lol #ho{
margin-top:5px;
position:absolute;
margin-left:6px;
}

.bah{
width:95px;
padding:10px;
height:4px;
background:#c4c4c4;
margin:7px;
color:white;
line-height:4px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

.bah a{
color:white;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

.bah a:hover{
text-decoration:none;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

.bah:hover{
text-decoration:none;
background:#b5b5b5;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

div#sidebar1 #no:hover{
margin-top:-150px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}
</style>
</head>

<body>
<div id="sidebar1">
<div id="no"><img src="http://static.tumblr.com/0a37b250e3383811b7a1e1437c209915/8hfjjpk/sD5n1a83r/tumblr_static_tumblr_lvtl0qouo51r1t60no1_500.jpg"/>
<div id="lol">
<div id="ho">
<div class="bah"><a href="/">refresh</a></div>
<div class="bah"><a href="http://flxourish.tk/ask/faq">message</a></div>
<div class="bah"><a href="http://flxourish.tk/etc">etc.</a></div>
<div class="bah"><a href="http://morgans-advice.tumblr.com/">advice</a></div>
</div>
</div>
</div>
</div></body>
</html>