Cikkajánló
Ha használtatok már valaha például fejléces menü kódot vagy hasonló kódokat, amikkel helyzeteket lehet változtatni, akkor a következő leírás nem lesz idegen a számotokra. Azért írtam, hogy ha pl.
Nagyon-nagyon sokan kérdeztétek, hogyan lehet azt megoldani, hogy a G-portálon a kiemelt kép szélein ne legyen padding, az-az oldalt és felül végigérjen a modulban a kép. Ezt is mint
Kellemes estét :) Hoztam mára még négyféle project szövegdobozt és kilencféle elit csere ikon effektet. Az összes egyesével megnézhető az alábbi linkeken. Válogassatok :) A project dobozoknál és az
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse 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
245 megtekintés

Hozzászólások