Cikkajánló
Sziasztok. Nem nagyon szoktam ilyesmit csinálni, de muszáj megosztanom veletek Virág egyik nagyon jó kis szövegdobozát. Tisztára beleszerettem. Nagyon tetszik és tök egyedi :) És még van az oldalán
Remélem nem baj, ha megemlítem, de pár napja írtam a G-Portál Webmesterének, hogy milyen jó lenne, ha a Blog modul alatt a lapozót is lehetne CSS kóddal átalakítani. Erre
A héten volt egy ilyen kérés is, hogy hogyan lehet az Awesome ikonokat úgy használni a G-Portálon, hogy nem kell külön kódokkal bíbelődni. Hát ma volt időm, hogy megírjam
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
Képes project szövegdoboz 17.


„Élőben” a dobozban csak akkor látható a szöveg, ha ráviszitek a képre az egeret. Egyébként csak a kép látszik élesben.

 

Ikon kódja

 

<script src="https://use.fontawesome.com/9f3339f954.js"></script>

 

Szövegdoboz kódja

 

<div id="elit">
<div class="elit">
<h1>Celine Dion</h1>
<img src="IDE JÖN A KÉP URL CÍME" />
<div class="textbox">
<div class="text">IDE JÖN A SZÖVEG.
</div>
</div>
</div>
<center><a class="project-link" href="/"><i class="fa fa-info-circle" aria-hidden="true"></i> IMDB</a> <a class="project-link" href="/" target="_blank"><i class="fa fa-check-circle" aria-hidden="true"></i> Hivatalos</a> <a class="project-link" href="/" target="_blank"><i class="fa fa-picture-o" aria-hidden="true"></i> Képek</a></center>
</div>

 

CSS kód

 

<style>
#elit {
margin: 0px auto; /* ez marad. ettől lesz a modulban középen */
width: 350px; /* a doboz szélessége, amiben a képek vannak */
}
.elit {
position:relative;
}
#elit .elit h1 {
font-family: Arial;
font-size: 15px;
font-weight: bold !important;
text-align: center;
color: #787878 !important;
background: #f2f2f2 !important;
border-bottom: 2px solid #787878;
padding: 10px;
margin-bottom: 5px;
}
.elit .textbox {
width:350px; /* kép szélessége */
height:188px; /* kép magassága */
position:absolute;
-webkit-transform: scale(0);
transform: scale(0);
top:0;
left:0;
}
.elit:hover .textbox {
-webkit-transform: scale(1);
transform: scale(1);
}
.elit img { /* kép kinézete */
border: 0px;
}
.elit img:hover {
-webkit-filter: blur(3px);
filter: blur(3px);
}
.text {
width: 330px;
line-height: 16px !important; /* sorok közötti táv */
font-family: Arial !important;
color: #ffffff !important;
font-size: 13px !important;
text-align: justify; /* szöveg középen */
text-shadow: 1px 1px 2px #000000;
background: transparent !important;
font-weight: normal !important;
text-decoration: none !important;
margin: 55px 0 0 10px;
z-index: 2;
}
#elit .fa {
margin-right:4px;
font-size:12px !important;
color:#787878 !important;
font-style: normal !important;
}
a.project-link:link, a.project-link:visited { /* linkek a doboz alatt */
background: #F2F2F2 !important;
color: #787878 !important;
padding: 8px 0 8px 0;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
line-height: 10px;
display: inline-block;
width: 114px;
}
a.project-link:hover {
background: #000000 !important;
color: #ffffff !important;
text-decoration: none;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>

lindadesign Hozzászólások
1 008 megtekintés

Hozzászólások