Cikkajánló
Általában soha nem szoktam a véleményemet leírni, vagy kimondani, ha nem muszáj, mert túl őszinte vagyok, és vannak olyan emberek, akik nagyon nehezen viselik az igazságot. Vagyis általában a
Ez alatt a leírás alatt azt értem, mikor pl. a főoldalon egy adott kategóriára kattintotok, mert az érdekel, hogy milyen hírek, cikkek születtek már benne. Akkor is megjelenik egy
8. rész   Ebben a részben a column_main azaz a G-Portálon lévő középső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a középső világos színű modult. Ezt a
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
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 261 megtekintés

Hozzászólások