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 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>


308 megtekintés

Hozzászólások