2017. 11. 20.Képes project szövegdoboz 32.
2017. 11. 18.Videó beágyazása Coppermine galériába 2.0
2017. 11. 16.Coppermine themes
2017. 11. 16.WordPress themes
2017. 11. 15.Új design a LindaDesign-on
png-keszites.flv

PNG kép készítése

demi-lovato.png

Sosugary Gallery themes

lindadesign-fantasy.png

Coppermine Gallery themes

vanessa-marano.png

G-Portál themes

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>


596 megtekintés

Hozzászólások