2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
112 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 néző

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>


679 megtekintés

Hozzászólások