2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
227 napja
553 néző

WordPress themes

WordPress themes
228 napja
177 néző

G-Portál themes

G-Portál themes
228 napja
103 néző

Tumblr themes

Tumblr themes
228 napja
153 néző

Képes project szövegdoboz 6.

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></h3></div>
</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  cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover .overlay { /* háttérszín, ha ráviszed az egeret */
background: #F3B07B;
opacity: 0.5;
filter: alpha(opacity=70);
-moz-opacity:0.7; /* háttérszín átlátszósága */
}
.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  cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.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: #000000;
border: 1px solid #000000;
background: transparent;
display: inline-block;
opacity: 0;
filter: alpha(opacity=0);
font-weight: normal;
padding: 25px 25px;
margin: 30px 30px 10px 30px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect p:hover {
box-shadow: 0 0 5px #686868;
}
.hovereffect h3 { /* cím kinézete */
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.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: #FD835E;
}</style>


1 371 megtekintés

Hozzászólások