Cikkajánló
Hogy mi az az URL cím? Sok cikkemben írom, hogy pl. másoljátok ki az URL címet. Nekem ez tök egyértelmű, de lehet van olyan, akinek nem az. Szóval az
4. rész   Magyarul a sitetop a szerkeszthető fejléc CSS kódrésze. Ha használjátok a szerkeszthető fejlécet pl. menünek vagy igazából bárminek, akkor a CSS kódban be lehet állítani, hogy
Egy újabb G-Portálos teljes kinézetet hoztam. Ígérem most már lassan abbahagyon a GP-s design-ok gyártását, csak hát már olyan régen nem hoztam a G-Portálra bármilyen kinézetet vagy CSS kódot,
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 5.

Sorozat címe

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Frissek Online Hivatalos Képek

 
Doboz kódja
A perjel helyére mennek a link címek a frissek, online, stb-nél

 

<div class="hovereffect">
<img alt="" class="img" src="ide jön a kép URL címe" />
<div class="overlay">
<h2>
Sorozat címe</h2>
<p>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3><a href="/"><b>Frissek</b></a> <a href="/"><b>Online</b></a> <a href="/"><b>Hivatalos</b></a> <a href="/"><b>Képek</b></a></div></h3>
</div>

 

CSS kód

 

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab&subset=latin,latin-ext);
.hovereffect {
width: 650px; /* a doboz szélessége */
height: 400px; /* a doboz magassága */
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
margin: 0px auto;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #4B4B4B; /* háttérszín a képre */
filter:alpha(opacity=50); /* háttérszín átlátszósága */
-moz-opacity:0.5; /* háttérszín átlátszósága */
opacity: 0.5; /* háttérszín átlátszósága */
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay { /* háttérszín, ha ráviszed az egeret */
background: #627D59;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 { /* cím kinézete */
font-family: 'Roboto Slab', serif;
text-transform: uppercase;
color: #ffffff;
text-align: center;
position: relative;
font-size: 17px;
font-weight: normal;
letter-spacing: 1px;
padding: 10px;
background: #000000;
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect p { /* tartalom kinézete */
font-family: Arial;
font-size: 13px;
text-align: justify;
color: #ffffff;
border: 1px solid #ffffff;
background: transparent;
display: inline-block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
padding: 25px 25px;
margin: 30px 30px 10px 30px;
}
.hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
p:hover {
box-shadow: 0 0 5px #ffffff;
}
.hovereffect h3 { /* alsó linkek helyzete */
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect b { /* linkek kinézete */
font-family: Arial !important;
font-size: 13px !important;
font-weight: normal !important;
text-align: center;
padding: 7px;
color: #ffffff;
border-bottom: 4px solid #ffffff;
background: #000000;
}
</style>

lindadesign Hozzászólások
1 392 megtekintés

Hozzászólások