私の情報ボックスを縮小する

Question

私はHTMLとCSSで作られた情報ボックスを持っています。私はボックスのサイズとホバーの内容を縮小する方法を見つけることができないようです。ボックスのサイズを小さくすると、ホバーの内容が内部に収まりきらなくなり、私が見逃しているものが見えなくなります。誰も私のボックスのサイズを正しく変更する方法を教えてもらえますか？何でも助けてくれる、歓声。

.infobox-list { 
 
    display: inline-block; 
 
    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: #3299CC; 
 
    border: 1px solid #efefef; 
 
    border-radius: 4px; 
 
    margin: 0 20px 40px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

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

 
.everything 
 
{ 
 
    text-align:center; 
 
} 
 

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

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight:lighter; 
 
} 
 

 
.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:245px; 
 
    left:0; 
 
    top:0; 
 
    background-color:#4682B4; 
 
    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)} 
 
}

<br/> 
 
<br/> 
 
<div class="everything"> 
 
<section class="info-boxes"> 
 
    <ul class="infobox-list"> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="infobox"> 
 
      <img class="pics" src=""><br> 
 
        </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=""><br> 
 
     </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=""><br> 
 
        </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=""><br> 
 
        </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>

Answer 1

私は150×150にサイズを調整し、テキストフィットを作るためにフォントサイズを調整してきました。
重複するCSSが削除されました。

.infobox-list { 
 
    display: inline-block; 
 
    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; 
 
    margin: 1em 0; 
 
    padding-left: 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: 150px; 
 
    height: 150px; 
 
    background: #3299CC; 
 
    border: 1px solid #efefef; 
 
    border-radius: 4px; 
 
    /* margin: 0 20px 40px; */ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.pics { 
 
    width: 135px; 
 
    height: 135px; 
 
    /* margin-bottom: 7px; */ 
 
    max-width: 100%; 
 
} 
 

 
.everything { 
 
    text-align: center; 
 
} 
 

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

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight: lighter; 
 
} 
 

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

 
.info-boxes li .shade { 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    left: 0; 
 
    top: 0px; 
 
    background-color: #a9bd38; 
 
    color: #fff; 
 
    display: table; 
 
    vertical-align: middle; 
 
    padding: 0; 
 
    transform: translateY(-150px); 
 
    -webkit-transform: translateY(-150px); 
 
    -moz-transform: translateY(-150px); 
 
    -ms-transform: translateY(-150px); 
 
    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; 
 
    font-size: 1em; 
 
    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; 
 
    margin: 1em 0; 
 
} 
 

 
.info-boxes li .shade p { 
 
    color: #fff; 
 
    line-height: 1em; 
 
    font-size: .8em; 
 
    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=""> 
 
      </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=""> 
 
      </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> 
 
      </div> 
 
     </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=""> 
 
      </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=""> 
 
      <br> 
 
      </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"> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </section> 
 
</div>

フィドルhere

Answer 2

私はあなたが正しいのであれば理解：あなたは小さなその中にあなたの箱とすべてのものを持っていたいですか？よく、あなたはサイズのための多くの異なった場所でpx値を使用しました（そして時には翻訳されたもの）ので、あなたはそれらを望むサイズに応じて変更する必要があります。

あなたもちょうどそれらを縮小できます。

.infobox-list { 
 
    display: inline-block; 
 
    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: #3299CC; 
 
    border: 1px solid #efefef; 
 
    border-radius: 4px; 
 
    margin: 0 20px 40px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    transform: scale(.9); 
 
} 
 

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

 
.everything 
 
{ 
 
    text-align:center; 
 
} 
 

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

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight:lighter; 
 
} 
 

 
.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:245px; 
 
    left:0; 
 
    top:0; 
 
    background-color:#4682B4; 
 
    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)} 
 
}

<br/> 
 
<br/> 
 
<div class="everything"> 
 
<section class="info-boxes"> 
 
    <ul class="infobox-list"> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="infobox"> 
 
      <img class="pics" src=""><br> 
 
        </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=""><br> 
 
     </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=""><br> 
 
        </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=""><br> 
 
        </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>