Cikkajánló
Kérésre hoztam egy újabb szövegdobozt, ahol ha a képre viszed az egeret, akkor jelenik meg az üdvözlő szöveg. De szöveg helyett más is lehet a doboz tartalma. Pl.:  
Hoztam egy újabb WordPress kódot, amivel a cikkek alatt lehet a kapcsolódó bejegyzéseket megjeleníteni. Egyfajta cikkajánló ez is, csak a cikkek alatt van elhelyezve. Ehhez sem kell külön bővítmény,
Telepítést és hasznos leírásokkat ezeken a linkeken olvashattok:   WordPress hozzászólások importálása Disqus-be Disqus használata bővítménnyel Legfrissebb bejegyzések megjelenítése az oldalsávban   Ebben a cikkben most pár szóban megismertetem
Emma Roberts G-Portálos téma 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
Képes project szövegdoboz 18.


Élesben a szöveg eltűnik és a kép kiélesedik, ha ráviszitek az egeret.

 

Ikon kódja

 

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

 

Szövegdoboz kódja

 

<div id="elit">
<div class="elit">
<h1>Ashley Benson</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>
@import 'https://fonts.googleapis.com/css?family=Tillana&subset=latin-ext';
#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: 'Tillana', cursive;;
font-size: 35px;
font-weight: bold !important;
text-align: center;
color: #C09B6A !important;
background: transparent !important;
text-transform: uppercase !important;
margin-bottom: 5px;
}
.elit .textbox {
width:350px; /* kép szélessége */
height:188px; /* kép magassága */
position:absolute;
-webkit-transform: scale(1);
transform: scale(1);
top:0;
left:0;
}
.elit:hover .textbox {
-webkit-transform: scale(0);
transform: scale(0);
}
.elit img { /* kép kinézete */
-webkit-filter: blur(3px);
filter: blur(3px);
border: 0px;
}
.elit img:hover {
-webkit-filter: blur(0px);
filter: blur(0px);
}
.text {
width: 330px;
line-height: 16px !important; /* sorok közötti táv */
font-family: Arial !important;
color: #000000 !important;
font-size: 13px !important;
text-align: justify; /* szöveg középen */
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:#F2EDDB !important;
font-style: normal !important;
}
a.project-link:link, a.project-link:visited { /* linkek a doboz alatt */
background: #836F30 !important;
color: #F2EDDB !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: #7A8877 !important;
color: #f2f2f2 !important;
text-decoration: none;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>

lindadesign Hozzászólások
524 megtekintés

Hozzászólások