JavaScript
  /* Demo purposes only */
  $("figure").mouseleave(
    function() {
      $(this).removeClass("hover");
    }
  );
/* Included color classes.. 
	.red 
	.blue 
	.yellow 
*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1104 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.snip1104 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

figure.snip1104 img {
  max-width: 100%;
  position: relative;
  opacity: 0.4;
}

figure.snip1104 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

figure.snip1104 h2 {
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block;
  background: #000000;
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  padding: 12px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

figure.snip1104 h2 span {
  font-weight: 800;
}

figure.snip1104:before {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  content: '';
  background: #ffffff;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(110deg) translateY(-50%);
  transform: rotate(110deg) translateY(-50%);
}

figure.snip1104 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

figure.snip1104.blue {
  background: #123851;
}

figure.snip1104.blue h2 {
  background: #0a212f;
}

figure.snip1104.red {
  background: #581a14;
}

figure.snip1104.red h2 {
  background: #36100c;
}

figure.snip1104.yellow {
  background: #7f5006;
}

figure.snip1104.yellow h2 {
  background: #583804;
}

figure.snip1104:hover img,
figure.snip1104.hover img {
  opacity: 1;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

figure.snip1104:hover h2,
figure.snip1104.hover h2 {
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}

figure.snip1104:hover:before,
figure.snip1104.hover:before {
  -webkit-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}
HTML
<figure class="snip1104 red">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample33.jpg" alt="sample33" />
  <figcaption>
    <h2>Jean  <span> Myers</span></h2>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1104 blue hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample34.jpg" alt="sample34" />
  <figcaption>
    <h2>Lynn  <span> Reyes</span></h2>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1104"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample35.jpg" alt="sample35" />
  <figcaption>
    <h2>Tracy <span> Logan</span></h2>
  </figcaption>
  <a href="#"></a>
</figure>

<br /><br /><br />
<a href="http://codepen.io/littlesnippets/pen/NGdoKP" target="_blank">מקור הסקריפט</a>

נוספו לאחרונה

שינוי הגדרות האלמנט בגלילת החלון

אפקט המשמש בעיקר לתפריט עליון

סרטון יוטיוב רספונסיבי

כיצד נוכל להטמיע סרטון יוטיוב בפורמט רספונסיבי כך שיתאים עצמו אוטומטית לכל ההתקנים. כמו כן, בדוגמא זו הסרטון מתחיל לנגן אוטומטית עם עלית הדף

עוד קוד לשימוש בווידיאו כרקע

רקע וידאו לאתר (HTML צריך להיות בקוד רייייפלייס)

תוסף אפקט וואוו

הוראות מפורטות כיצד לשלב אפקט וואוו במערכת אדממה. אפקט זה מאפשר להציג אלמנטים באנימצייה עם גלילית החלון

אפקטים לתמונה במעבר העכבר

הוראות להוספת אפקטים במעבר העכבר מרשימת האפקטים של תצוגת רשת בקטבלוג

קודי סקריפט לבוטסראפ במערכת אדממה

בסרגל הבוטסטראפ שבעורך הוויזואלי ישנם קודים מעניינים לשימוש חלק מהקודים דורשים שימוש בסקריפט ייחודי. להלן הרשימה שימו לב: את הסקריפטים יש לשים באזור של תיבת הקוד הייחודי בדף

תפריט navbar

nav bar במיקום קבוע (כרגע נצמד למעלה אבל אפשר לשנות את המיקום שלו) מה שמיוחד בו: 1. מופיע כשיכבה על כל אלמנט אחר לדוגמה סלייד שואו 2. יכול להיות שקוף 3. פרמטרים כגון צבע וגובהה ניתן להגדיר דרך ההגדרות של התבנית

תיקון שבירת שורה לאחר תמונה

קוד לתיקון שבירת שורה לאחר התמונה שקורה כשמפעילים תמונות רספונסיביות

אלמנט נצמד לגובה מסויים

זהו קלאס של בוטסטראפ. ניתן להצמיד כל אלמנט לגובה מסויים מראש המסך. ברגע שגוללים את הדף למטה, והאלמנט מגיע לראש, הוא נצמד. בדוגמה זו, האלמנט הוא תפריט נבבר

מצגת תמונות בתוך קונטינר

דוגמא כיצד ניתן להחליף באנימצייה את תמונות הרקע של דיב (קונטיינר) ובתוך הדיב יש תוכן