Képes Idézetek - G-Portál

AJÁNLOM AZ OLDALT

Idézetekkel - egészséggel foglalkozó oldalam

Főoldal

Itt láthatóak a legújabb frissítések

Idézetek, életmód, egészség

Elgondolkodtató, gyógyító idézetek, egészséggel kapcsolatos írások

HK Design Studio

Grafika, png-k, kódok

HK Digital Art

Képszerkesztéssel foglalkozó oldalam

Frissek

Friss bejegyzések

2016.12.01. 16:32

2016.11.20. 10:07

2016.10.21. 13:02

2016.10.04. 08:40

2016.10.03. 13:27

Oldalaim

Ezeket az oldalakat egyedül szerkesztem, munka mellett. A grafikai elemeket magam készítem, ahogy időm engedi. Ezen az oldalon a 3 másik oldalam frissísítéseit egyben találod meg.

Ajánló

	Oldalak, melyeket rendszeresen olvasok 2016. 07. 18.
Az alábbi linkeken kedvenc oldalaimat ajánlom figyelmedbe. Ha kedved van látogasd meg ezeket az oldalakat. :) Angyalok Gábor Életmód

Csevegő

Elite & Link csere

Képes vagy linkcserére jelentkezni a chatben vagy a vendégkönyvben lehet. Előtte légyszi olvasd el a cserékre vonatkozó feltételeket.

Juti Design

Hírmagazin

2016.05.31 blog közép

Infó box 1 + Hover effect

2016.07.15. 23:22, C. Design

Címkék: Infó box Hover effect

---

Demo & Code : HK Design Studio

Ma láttam egy érdekes szövegdobozt. Kicsit alakítottam rajta, mint mindig. Általában inspirálnak ezek a kódok, legtöbbször addig alakítom, míg a végén rá sem ismerek az eredetire. Most azért nem végeztem annyira drasztikus átalakítást. Remélem nektek is tetszik és hasznát veszitek.
Ha elviszed, légyszi írd ki a forrást. Köszi :)

/ Infó box + Hover effect - Demo nagyobb méretben /

Category : CSS >> Text box , / Szöveg doboz /

Ha tetszett, oszd meg bátran barátaiddal, ismerőeiddel :)

---

Demót látod, ha ráviszed az egeret.

01.07

Szép betűtípusok / 25 db / HK Design Studio

Category : CSS >> Text box , / Szöveg doboz /

Ha tetszett, oszd meg bátran barátaiddal, ismerőeiddel :)

Kód :

<center>

<article class="mini" id="post-5952"> <img alt="2" class="attachment-mini size-mini wp-post-image" height="268" src="//cameron.gportal.hu/portal/cameron/image/gallery/1470865363_98.jpg" width="360" /> <figcaption> <time>01.07</time>

<h4>

<a href="//cameron.gportal.hu/">Szép betűtípusok / 25 db / HK Design Studio</a></h4>

</figcaption></article></center>

CSS kód :

<style type="text/css">

/* infó box - hover effecttel - //cameron.gportal.hu/ */

#content-single {

width: 100%;

height: auto;

clear: both;

}

article.mini {

width: 620px;

margin: 0 3% 3% 0;

position: relative;

overflow: hidden;

float: left;

background: #000;

text-align: center;

cursor: pointer;

}

article.mini:nth-child(even) {

margin-right: 0;

}

article.archives {

margin: 0 3% 3% 0!important;

}

article.archives:nth-child(odd) {

margin-right: 0!important;

}

article.mini:hover {

background: -webkit-linear-gradient(45deg, #BE1C18 0%,#845E47 40%,#000000 100%);

background: linear-gradient(45deg, #BE1C18 0%,#845E47 40%,#000000 100%);

background: -moz-linear-gradient(45deg, #BE1C18 0%,#845E47 40%,#000000 100%);

background: -o-linear-gradient(45deg, #BE1C18 0%,#845E47 40%,#000000 100%);

}

article.mini img {

width: 100%;

height: auto;

opacity: 0.7;

-webkit-transition: opacity 0.35s;

transition: opacity 0.35s;

}

article.mini:hover img {

opacity: 0.4;

}

article.mini figcaption::before,

article.mini figcaption::after {

position: absolute;

top: 5%;

right: 4%;

bottom: 5%;

left: 4%;

content: '';

opacity: 0;

-webkit-transition: opacity 0.35s,

-webkit-transform 0.35s;

transition: opacity 0.35s, transform 0.35s;

}

article.mini figcaption::before {

border-top: 1px solid #ffeada;

border-bottom: 1px solid #ffeada;

-webkit-transform: scale(0,1);

transform: scale(0,1);

}

article.mini figcaption::after {

border-right: 1px solid #ffeada;

border-left: 1px solid #ffeada;

-webkit-transform: scale(1,0);

transform: scale(1,0);

}

article.mini:hover figcaption::before,

article.mini:hover figcaption::after {

opacity: 1;

-webkit-transform: scale(1);

transform: scale(1);

}

article.mini time {

width: 20%;

opacity: 1;

font: 700 15px 'Open Sans';

-webkit-transition: opacity 0.35s,

-webkit-transform 0.35s;

transition: opacity 0.35s, transform 0.35s;

-webkit-transform: translate3d(0,20px,0);

transform: translate3d(0,20px,0);

position: absolute;

top: 50%;

left: 4%;

border: 1px solid #ffeada;

color: #ffeada;

}

article.mini h4 {

opacity: 1;

font: 700 17px 'Open Sans';

-webkit-transition: opacity 0.35s,

-webkit-transform 0.35s;

transition: opacity 0.35s, transform 0.35s;

-webkit-transform: translate3d(0,20px,0);

transform: translate3d(0,20px,0);

position: absolute;

bottom: 20%;

left: 5%;

right: 5%;

z-index: 9;

text-decoration: none;

}

article.mini:hover h4,

article.mini:hover time {

opacity: 1;

-webkit-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

}

article.mini h4 a {

color: #ffeada;

text-decoration: none;

}

.leiamais {

width: 46.5%;

padding: 2% 1%;

margin: 0 auto 5%;

background: #131212;

border: 1px solid #B31C1C;

font: 700 12px Raleway;

letter-spacing: 2px;

text-align: center;

clear: both;

}

.leiamais:hover {

background: #961212;

}

.leiamais a {

color: #fff;

}

</style>