Cikkajánló
Eddig 95%-ban úgy oldottuk meg a a cím kérdését G-Portálon a Blog modulban, hogy egy képszerkesztővel rászerkesztettük a kiemelt képre a címet és már úgy lett feltöltve a képtárba
Most egy olyan leírást hoztam a Coppermine galériához, ami szerintem csúcs szuper. Egy valaki kérdezte ezt tőlem, de először nem nagyon értettem mit szeretne, aztán mutatott egy ilyen külföldi
Hoztam egy egyszerű de mutatós CSS idézetblokkot. Egy kicsit a sima hagyományos idézetblokkot átalakítottam. Hasonló kinézeteket már biztosan láttatok egyes oldalakon. G-Portálon és rendes HTML oldalon is ugyanaz a
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse G-Portálos téma
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
545 megtekintés

Hozzászólások