2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
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
Coppermine Gallery themes

Coppermine Gallery themes
165 napja
263 néző

WordPress themes

WordPress themes
166 napja
143 néző

G-Portál themes

G-Portál themes
166 napja
86 néző

Tumblr themes

Tumblr themes
166 napja
128 néző

Képes project szövegdoboz 20.
Avatar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Project címe: film címe is lehet

Megjelenése: 2017. 07. 10.

Típusa: Sorozat vagy Film

Hírek Online Hivatalos Képek

 

Doboz kódja
Ha a kép fölé viszitek az egeret, akkor jelenik meg az adott project leírása :)

 

<div id="projectdoboz">
<div id="project">
<img src="ide jön a kép url címe" class="image">
<div class="overlay">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</div>
</div>
</div>
<div class="projectadat">
<p>Project címe: film címe is lehet</>
<p>Megjelenése: 2017. 07. 10.</>
<p>Típusa: Sorozat vagy Film</>
<center><a href="/" class="project-link">Hírek</a> <a href="/" class="project-link">Online</a> <a href="/" class="project-link" target="_blank">Hivatalos</a> <a href="/" class="project-link" target="_blank">Képek</a></center>
</div>
</div>

 

CSS kód

 

<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500&subset=latin-ext');
#projectdoboz {
margin: 0 auto;
width: 300px;
}
#project {
position: relative;
width: 50%;
}
.image {
display: block;
width: 300px;
height: 150px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
width: 300px;
opacity: 0;
transition: .5s ease;
background: #8E8CB0;
}
#project:hover .overlay {
opacity: 1;
}
.text {
font-family: Montserrat;
color: white;
font-size: 10px;
line-height: 20px;
padding: 5px;
position: absolute;
}
.projectadat p {
font-family: Montserrat;
font-size: 10px;
color: #ffffff;
background: #5E5C86;
font-weight: 500;
text-shadow: 1px 1px 0px #343243;
padding: 0 0 0 3px;
margin: 1px 0 1px 0;
}
a.project-link:link, a.project-link:visited { /* linkek a doboz alatt */
font-family: Montserrat;
color: #8E8CB0;
font-size: 10px !important;
border-bottom: 1px solid #5D5C86;
margin: 5px 0 5px 0;
padding: 5px 15px 5px 15px;
font-weight: 500 !important;
text-transform: uppercase;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
a.project-link:hover {
color: #000000;
border-bottom: 1px solid #000000;
text-decoration: none !important;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
</style>


456 megtekintés

Hozzászólások