Twinix Design

free website templates

Card1 Syntax Vorlage

Bei dieser Syntax wird der Inhalt des Covers vordefiniert, und der Inhalt der hover Seite über {VALUE} eingetragen.
<h3> und Titel könnte man z.B auch durch ein Bild ersetzen. Man kann die Syntax auch öfters mit verschiedenen Titeln anlegen, und beim Cover variieren.(z.B. card1 = ....., card2 = ... usw.)

*solltest du in deinem Design nicht mit Flexbox arbeiten musst du im CSS Code display: flex; durch display: block; ersetzen.

Falls du nicht weist wie du eigene Syntax Elemente in mozilo anlegst findest du eine Anleitung auf der ofiziellen Seite.
Tipps und Tricks » Benutzerdefinierte Syntaxelemente moziloCMS Website

Twinix Design hover Infobox

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.

Read More

CSS Code

/* card1 syntax */

.card1-container{
    width: 1000px;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.card1-container .card1{
    position: relative;
    cursor: pointer;
}

.card1-container .card1 .face{
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.card1-container .card1 .face.face1{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}

.card1-container .card1:hover .face.face1{
    background: #ff0057;
    transform: translateY(0);
}

.card1-container .card1 .face.face1 .card1-content{
    opacity: 0.2;
    transition: 0.5s;
}

.card1-container .card1:hover .face.face1 .card1-content{
    opacity: 1;
}

.card1-container .card1 .face.face1 .card1-content img{
    max-width: 100px;
}

.card1-container .card1 .face.face1 .card1-content h3{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}

.face.face {
    padding: 10px;
}
.card1-container .card1 .face.face2{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
}

.card1-container .card1:hover .face.face2{
    transform: translateY(0);
}

.card1-container .card1 .face.face2 .card1-content p{
    margin: 0;
    padding: 0;
}

.card1-container .card1 .face.face2 .card1-content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
}

.card1-container .card1 .face.face2 .card1-content a:hover{
    background: #333;
    color: #fff;
}

Syntax Code

card1 = <div class="card1-container"><div class="card1"><div class="face face1">
        <div class="card1-content"><h3>Twinix Design hover Infobox</h3></div></div>
        <div class="face face2"><div class="card1-content">{VALUE}</div></div></div></div>

Last Update

02.09.2020

Yoga_TX steht zum Download bereit
Eine Live-Vorschau ist über den Layoutswitcher möglich.


Bild "Layouts:yoga.jpg"

Yoga_TX

  • Responsive
  • Font Awsome
  • und vieles mehr..
  • Statistik

  • » 1 Online
  • » 0 Heute
  • » 25 Woche
  • » 0 Monat
  • » 530 Jahr
  • » 530 Gesamt
  • Max.: 16 (31.07.2020)
verstanden

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.

Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung