Cikkajánló
Elkészült egy újabb Photoshop formátumú fejléc :) A képek, amiket használtam a fejléc készítéséhez, fel lettek töltve a Galéria PNG képek kategóriájába is. Ezen a linken tudjátok letölteni a
Összesen hat pontba szedtem a számomra pozitív Disqus tulajdonságokat. Biztos van még több is, mert hát ugye kinek miért szimpatikus, de talán a lényeget sikerült összeszednem. Az első és
Sziasztok! Először is nagyon sajnálom, hogy ilyen sokáig nem jelentkeztem, de a gépemmel volt egy kisebb hiba. Azóta új gépem van, plusz a régi vinyóm is bekrepált és azon
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
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>

lindadesign Hozzászólások
94 megtekintés

Hozzászólások