CSS信息框悬停

时间：2017-06-09 19:47:15

标签： html css hover

我在下面的代码中找到了我正在使用的信息框。当我悬停时，如何制作它，整个绿色悬停背景填充高度，而不仅仅是高度的3/4？我无法看到我做错了什么，有什么帮助，欢呼。

.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: 345px;
    background: #efefef;
    border: 1px solid #e3e5e6;
    border-radius: 3px;
    margin: 0 20px 40px;
    position: relative;
    overflow: hidden;
}

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

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

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

a {
    color: #00898b;
    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%;
}

.infobox img {margin-bottom:7px}

.info-boxes li .shade {
  position:absolute;
  width:245px;
  height:255px;
  left:0;
  top:0;
  background-color:#a9bd38;
  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>

2 个答案:

答案 0 :(得分：1)

你走了:)）

.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 {
  box-sizing: border-box;
}

ul,
menu

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: 345px;
  background: #efefef;
  border: 1px solid #e3e5e6;
  border-radius: 3px;
  margin: 0 20px 40px;
  position: relative;
  overflow: hidden;
}

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

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

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

a {
  color: #00898b;
  text-decoration: none;
}

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

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

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

.info-boxes li .shade,
.info-boxes li:hover .shade {
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  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;
}

img {
  max-width: 100%;
}

.infobox img {
  margin-bottom: 7px
}

.info-boxes li .shade {
  position: absolute;
  width: 245px;
  height: 355px;
  left: 0;
  top: 0;
  background-color: #a9bd38;
  color: #fff;
  display: table;
  vertical-align: middle;
  padding: 20px 10px 0;
  transform: translateY(-340px);
  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 {
  animation-name: windowshade
}

.ie9 .info-boxes li:hover .shade {
  top: 245px
}

.info-boxes li:hover a {
  text-decoration: none
}

@keyframes windowshade {
  0% {
    transform: translateY(-340px)
  }
  100% {
    transform: translateY(0)
  }
}

@keyframes windowshade-out {
  0% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(-340px)
  }
}
<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>

答案 1 :(得分：1)

将高度设置为整个高度的100％。

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

＆＃13;
＆＃13; 
.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: 345px;
    background: #efefef;
    border: 1px solid #e3e5e6;
    border-radius: 3px;
    margin: 0 20px 40px;
    position: relative;
    overflow: hidden;
}

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

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

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

a {
    color: #00898b;
    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%;
}

.infobox img {margin-bottom:7px}

.info-boxes li .shade {
  position:absolute;
  width:245px;
  height:255px;
  left:0;
  top:0;
  background-color:#a9bd38;
  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;
   height:100%;
  }

.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)}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题