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
282 napja
700 néző

WordPress themes

WordPress themes
283 napja
198 néző

G-Portál themes

G-Portál themes
283 napja
112 néző

Tumblr themes

Tumblr themes
283 napja
162 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>


548 megtekintés

Hozzászólások