1. Zuhause
  2. Frage und Antwort
  3. Ich schrumpfe meine Infobox

Ich schrumpfe meine Infobox

2017-06-09 6 views
0

Ich habe eine Infobox, die ich verwende, die aus HTML und CSS besteht. Ich kann anscheinend nicht herausfinden, wie man die Größe der Kästen und des Hover-Inhalts verkleinert. Immer wenn ich die Größe der Boxen verkleinere, passt der Hover-Inhalt nicht hinein und ich kann nicht sehen, was ich vermisse. Kann mir jemand sagen, wie ich die Größe meiner Boxen richtig ändern kann? Alles hilft, Prost.Ich schrumpfe meine Infobox

.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>

Quelle

2017-06-09 Anonymous

+0

Was würden Sie hier erreichen? Ich habe es nicht bekommen –

+0

_Wenn ich die Größe der Box verkleinern, welche Box? Verwenden Sie bitte Selektoren, um anzugeben, welche Box Sie sagen werden. –

+0

@ H.Pauwelyn Ich frage mich nur, wie ich die Größen aller Boxen ändere. Ich möchte sie kleiner machen. Aber wenn ich sie kleiner mache, fällt der Hover-Inhalt fehl am Platz. –

Antwort

0

Ich habe die Größe 150x150 und angepasst, um die Schriftgröße angepasst, um den Text passend zu machen.
Doppelte CSS entfernt.

.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>

Fiddle here

Quelle

2017-06-09 14:06:07 Gerard

+0

Danke Kumpel, schätze es! –

0

Also, wenn ich verstanden Sie Recht: Sie möchten, dass Ihre Boxen und alles kleineren Innen ihn haben? Nun, Sie haben px-Werte an vielen verschiedenen Stellen für die Größe (und manchmal in den Übersetzungen) verwendet, so dass Sie sie entsprechend der Größe ändern müssen, die Sie möchten.

Sie könnten auch skalieren nur nach unten:

.info-boxes li { 
// your other stuff 
transform: scale(.9);   
}

hier ist der aktualisierte Code:

.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>

Quelle

2017-06-09 14:14:10 rebecca

Verwandte Themen

 Verwandte Themen