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
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
112 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 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 272 megtekintés

Hozzászólások