ACS css/html for hover profile - Qualtrics

hover/popup html;;



<div class="minicontainer" style="background-image: url('http://info.waynesburg.edu/Portals/153658/images/12-14ACS%20logo.jpg'); background-size: 200px 200px;">

<div class="profilemini">

<div class="minicontent1">

<div class="minicontent2"><b style="font-size: 10px;">name:</b><span style="font-size: 10px;"> steve rogers</span><br />

<span style="font-size: 10px;"><b>alias:</b></span>

<div class="test">

<div id="popup"><span style="font-size: 10px;"><a href="dropdownmenus.php">captain america<span>chris evans</span></a></span></div>

</div>

</div>

</div>

</div>

</div>





ORIGINAL CSS FOR ACS IMAGE;;

<!-- THIS IS THE STYLING CSS -->

<style>

.minicontainer {

height:200px;

width: 200px;

line-height:10px;

}

.profilemini {

position: absolute;

width: 200px;

height: 300px;

background-color: white;

opacity: 0;

-webkit-transition-duration: 1s;

transition-duration: 1s;

-moz-transition-duration: 1s;

}

.profilemini:hover {

opacity: 1;

}

.minicontent {

padding: 10px;

}

.test { padding-left:58px;}





</style>



<!-- END PROFILE HOVER -->



<!-- BEGIN POPUP CSS -->



/*hoverpopups type 1*/



#popup { color: #000; background-color: #fff; }



#popup a, #popup a:visited {

position: relative;

display: block;

width: 200px;

/*line-height: 30px;*/

text-align: left;

/*padding: 5px; 1. moves popup ^<*/

margin-top: -10px;

/*border: 1px solid #666;*/

text-decoration: none;

font-size: 10px;

font-weight: none; /*italic, bold, etc*/

color: #000; /*text color for the base that will be popped from*/



}



#popup a span {

display: none;

}



#popup a:hover {

background-color: #000;

}



/* the IE correction rule */

#popup a:hover {

color: #f00;

background-color: #fff;

text-indent: 0; /* added the default value */

}



#popup a:hover span {

display: block;

position: absolute;

top: 0px;

left: 70px;

width: 150px;

margin-left: 50px;

padding: 0px;

color: #000; /*text color for the popup*/

font-weight: normal;

background: #fff; /*bg color for the popup*/

text-align: left;

/*border: 1px solid #666;*/

}





<!-- END POPUP CSS -->