Tooltip / Popup Text CSS on hover

时间：2017-06-12 16:51:44

标签： html css

Is it possible to have the tooltip / pop up titles like in this example: https://codepen.io/kieranfivestars/pen/gbOWbM?editors=1100 to have them pop up over the info boxes I am using when hovered on? I have tried to incorporate the tooltips to what I have right now, but I cant get it working. I am new to Css so anything helps, cheers!

.infobox-list {
    display: table;
    text-align: center;
}

ul, ol, li {
    margin: 0;
    padding: 0;
    list-style-position: outside;
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    background-color: #fff;
    color: #555;
    min-width: 20em;
}

.info-boxes li {
    width: 245px;
    height: 245px;
    background: #e2ecf6;
    border: 1px solid #e3e5e6;
    border-radius: 3px;
    margin: 0 20px 40px;
    position: relative;
    overflow: hidden;
}

.infobox-list li {
    display: inline-block;
    vertical-align: middle;
}

a {
    color: #005bab;
    text-decoration: none;
}

.info-boxes li .infobox {
    display: table-cell;
    vertical-align: middle;
    height: 245px;
    width: 245px;
}

.info-boxes li .shade {
    position: absolute;
    width: 245px;
    height: 245px;
    left: 0;
    top: 0px;
    background-color: #a9bd38;
    color: #fff;
    display: table;
    vertical-align: middle;
    padding: 20px 10px 0;
    transform: translateY(-240px);
      -webkit-transform: translateY(-240px);
      -moz-transform: translateY(-240px);
      -ms-transform: translateY(-240px);
    animation-name: windowshade-out;
      -webkit-animation-name: windowshade-out;
      -moz-animation-name: windowshade-out;
      -ms-animation-name: windowshade-out;
}

.info-boxes li:hover .shade {
    animation-name: windowshade;
      -webkit-animation-name: windowshade;
      -moz-animation-name: windowshade;
      -ms-animation-name: windowshade;
}

.info-boxes li .shade, 
.info-boxes li:hover .shade {
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);  
  animation-duration: 1.5s;
      -webkit-animation-duration: 0.5s;
      -moz-animation-duration: 0.5s;
      -ms-animation-duration: 0.5s; 
  animation-iteration-count: 1;
      -webkit-animation-iteration-count: 1;
      -moz-animation-iteration-count: 1;
      -ms-animation-iteration-count: 1;
  animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;  
}

.info-boxes li .shade h3 {
    color: #fff;
    padding: 10px;
    font-weight: bold;
}

section p {
    line-height: 1.3em;
    color: #6d6e71;
    width: 95%;
    padding: 0 10px;
    margin-top: 5px;
    margin-left: 8px;
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

img {
    max-width: 100%;
}

.pics
{
  width:70px;
  height:70px;
}

.everything
{
  margin: auto;
  width: 50%;
}

.infobox img {margin-bottom:7px}

.info-boxes li .shade {
  position:absolute;
  width:245px;
  height:245px;
  left:0;
  top:0;
  background-color:#005bab;
  color:#fff;
  display:table;
  vertical-align:middle;
  padding:20px 10px 0;
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px);
  animation-name:windowshade-out
    -webkit-animation-name:windowshade-out;
    -moz-animation-name:windowshade-out;
    -ms-animation-name:windowshade-out;
}

.info-boxes li .shade h3 {color:#fff;padding:10px;font-weight:bold}
.info-boxes li .shade p {color:#fff;line-height:1.4em;font-weight:normal}

.info-boxes li:hover .shade{
  -webkit-animation-name:windowshade;
  -moz-animation-name:windowshade;
  -ms-animation-name:windowshade;
  animation-name:windowshade}

.ie9 .info-boxes li:hover .shade {top:245px}
.info-boxes li:hover a {text-decoration:none}

@-webkit-keyframes windowshade{
  0%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-moz-keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-ms-keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-webkit-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@-moz-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@-ms-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}
<div class="everything">
<section class="info-boxes">
  <ul class="infobox-list">
    <li>
      <a href="#">
        <div class="infobox">
          <img class="pics" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1496939981/1496957967_user_smfixc.png"><br>
                        <h3 class="tertiary-title">My Profile</h3>
                    </div>
        <div class="shade">
          <h3>My Profile</h3>
          <p>Get real-time feedback to improve products, services, and business overall</p>
          <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png"><br>
        </div>
      </a>
    </li>
    
    <li>
      <a href="#">
        <div class="infobox">
          <img class="pics" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1496939645/1496957635_star_uh7rpd.png"><br>
          <h3 class="tertiary-title">My Performance</h3>
        </div>
        <div class="shade">
          <h3>My Performance</h3>
          <p>Assess the key drivers of talent retention to build an effective company culture</p>
          <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png"><br>
       </a>
    </li>
    
    <li>
                <a href="/mp/event-planning-surveys/?ut_source=homepage&amp;ut_source2=home_oz_uk">
                    <div class="infobox">
                        <img class="pics" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1496939645/1496957621_book_ujnnlp.png"><br>
                        <h3 class="tertiary-title">My Learning</h3>
                    </div>
                    <div class="shade">
                        <h3>My Learning</h3>
                        <p>Gather attendee feedback to perfect the planning process and win more contracts</p>
                        <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png"><br>
                    </div>
                </a>
            </li>
    <li>
                <a href="/mp/education-surveys/?ut_source=homepage&amp;ut_source2=home_oz_uk">
                    <div class="infobox">
                        <img class="pics" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1496939548/1496957535_user-group_ahhspl.png"><br>
                        <h3 class="tertiary-title">My Team</h3>
                    </div>
                    <div class="shade">
                        <h3>My Team</h3>
                        <p>Get answers to improve programs, processes, and academic achievement</p>
                        <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png"><br>
                    </div>
                </a>
            </li>      
</ul> 
</section>
</div>

0 个答案:

没有答案
相关问题
最新问题