Strona główna
Przegląd Webmastera
Kontakt

Strona główna
Przegląd Webmastera
Kontakt

jQuery

22 Artykułów

Kategorie
Wszystko
Przegląd Webmastera
Javascript
PHP
CSS
jQuery

Wtyczki

10 niesamowitych tabel jQuery

Tworzenie tabel bywa problematyczne, szczególnie jeśli musimy wyświetlić dużo kolumn. W tym przypadku zazwyczaj pojawią się problemy z responsywnością i zachowaniem czytelności tabeli. Oprócz tego często będziemy...

3
116
7 lat temu

jQuery

Jak zrobić preloader?

W tym artykule dowiesz się jak zrobić prosty preloader, który ukryje stronę do momentu pełnego załadowania.

14
129
8 lat temu

jQuery

Korona Ziemi z WebSlides – jak tworzyć prezentacje?

WebSlides to nowe narzędzie, które pozwala na proste tworzenie prezentacji. W tym artykule zrobimy pokaz slajdów przedstawiający Koronę Ziemi.

1
74
8 lat temu

jQuery

11 przydatnych snippetów jQuery, które powinien znać każdy Webmaster

Zbiór 11 przydatnych fragmentów kodu jQuery, które powinien znać każdy Web Developer.

4
94
8 lat temu

jQuery

13 efektownych wtyczek scrollujących jQuery

W tym artykule poznasz 13 wtyczek jQuery, które pozwolą Ci tworzyć niesamowite efekty podczas przewijania strony. Nie przedłużając, przejdźmy do pierwszej z nich.

9
98
8 lat temu

Javascript

5 najciekawszych pluginów menu w Javascript

Nawigacje na stronach internetowych zazwyczaj wyglądają bardzo podobnie. Ale nie musi tak być. W tym wpisie przedstawię Ci 5 nietypowych pluginów jQuery, które zdecydowanie wyróżnią Twoją stronę.

2
75
9 lat temu

Wtyczki

6 najlepszych wtyczek do tworzenia okien Modal

Okna modal mają obecnie bardzo szerokie zastosowanie. Są używane do wyświetlania komunikatów, formularzy, zdjęć i praktycznie każdego innego elementu, który można zobaczyć na stronach internetowych. W tym...

0
76
9 lat temu

Wtyczki

5 najlepszych pluginów jQuery do tworzenia sliderów

Slidery nie bez powodu są jednym z najpopularniejszych elementów znajdujących się na stronach internetowych. Główną zaletą sliderów jest ich wszechstronność – mogą zostać użyte do stworzenia galerii,...

2
79
9 lat temu

CSS

Wysuwane boczne menu

W tym wpisie pokażę Ci jak w prosty sposób wykonać wysuwające się z boku menu. Zaczynajmy 🙂

8
130
9 lat temu

jQuery

Jak zrobić karuzelę z owlCarousel

W tym wpisie pokażę Ci jak zrobić automatycznie przesuwającą się karuzelę. To rozwiązanie sprawdzi się świetnie np. w galerii lub portfolio. Zaczynajmy 🙂

1
92
9 lat temu

jQuery

Slider z wtyczką bxSlider

W tym wpisie pokażę Ci jak w prosty sposób przy pomocy wtyczki bxSlider utworzyć efektowny pokaz slajdów. Zaczynajmy 🙂

1
86
9 lat temu

CSS

Mobilne menu ze Slicknav.js

W tym wpisie pokażę Ci jak w bardzo prosty sposób przy użyciu pluginu Slicknav zrobić menu, które będzie idealnie wyświetlało się przy niższych rozdzielczościach ekranu. Zaczynajmy 🙂

0
113
9 lat temu

Załaduj więcej Strona 1 z 2

Starsze posty

Na Twitterze

"Przegląd Webmastera #3 – najwyższe zarobki, wykrywanie twarzy i forum Devcorner #webdev https://t.co/JU4iNvOjiV"

@Devcorner_pl 6 lat temu

Nawigacja

Strona główna
Przegląd Webmastera
Kontakt

Onyx WordPress Theme by EckoThemes. Published with WordPress.

Przybliżenie i przyciemnienie

HTML

<div class="hovereffect-1">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Przybliżenie i przyciemnienie</h2><a class="info" href="#">Link</a>
	</div>
</div>

CSS

.hovereffect-1 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.hovereffect-1 .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out
}
.hovereffect-1 img {
	display: block;
	position: relative;
	-webkit-transition: all .4s linear;
	transition: all .4s linear;
}
.hovereffect-1 h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 17px;
	background: rgba(0, 0, 0, 0.6);
	-webkit-transform: translatey(-100px);
	-ms-transform: translatey(-100px);
	transform: translatey(-100px);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	padding: 10px;
}
.hovereffect-1 a.info {
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	background-color: transparent;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	margin: 0 0 0;
	padding: 7px 14px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hovereffect-1 a.info:hover {
	box-shadow: 0 0 5px #fff;
}
.hovereffect-1:hover img {
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
.hovereffect-1:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
}
.hovereffect-1:hover a.info {
	opacity: 1;
	filter: alpha(opacity=100);
}
.hovereffect-1:hover h2 {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-transform: translatey(0);
	-webkit-transform: translatey(0);
	transform: translatey(0);
}
.hovereffect-1:hover a.info {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}

Linki do social media

HTML

<div class="hovereffect-2">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Linki do social media</h2>
		<p class="set1"><a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a></p>
		<hr>
		<hr>
		<p class="set2"><a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-dribbble"></i></a></p>
	</div>
</div>

CSS

.hovereffect-2 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.hovereffect-2 .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.hovereffect-2 img {
	display: block;
	position: relative;
}
.hovereffect-2 h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	font-size: 17px;
	padding: 10px;
}
.hovereffect-2:hover h2 {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
	transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
}
.hovereffect-2 a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	margin: 50px 0 0 0;
	background-color: transparent;
}
.hovereffect-2 a.info:hover {
	box-shadow: 0 0 5px #fff;
}
.hovereffect-2 hr {
	width: 40%;
	opacity: 0;
	filter: alpha(opacity=0);
	border: 1px solid #FFF;
}
.hovereffect-2 hr:nth-child(3) {
	-webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 90deg) scale3d(0, 0, 1);
	transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 90deg) scale3d(0, 0, 1);
}
.hovereffect-2 hr:nth-child(4) {
	-webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 180deg) scale3d(0, 0, 1);
	transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 180deg) scale3d(0, 0, 1);
}
.hovereffect-2 h2, .hovereffect-2 hr {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	-webkit-transform-origin: 50%;
	-ms-transform-origin: 50%;
	transform-origin: 50%;
	background-color: transparent;
	margin: 0px;
}
.set1, .set2 {
	left: 50%;
	position: absolute;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	-webkit-transform-origin: 50%;
	-ms-transform-origin: 50%;
	transform-origin: 50%;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
}
.set1 {
	top: 40%;
}
.set2 {
	top: 60%;
}
.hovereffect-2 p {
	width: 30%;
	text-transform: none;
	font-size: 15px;
	line-height: 2;
}
.hovereffect-2 p a {
	color: #fff;
}
.hovereffect-2 p a:hover, .hovereffect-2 p a:focus {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.hovereffect-2 a i {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	padding: 10px;
	font-size: 20px;
}
.set1 a:first-child i {
	-webkit-transform: translate3d(-60px, -60px, 0);
	transform: translate3d(-60px, -60px, 0);
}
.set1 a:nth-child(2) i {
	-webkit-transform: translate3d(60px, -60px, 0);
	transform: translate3d(60px, -60px, 0);
}
.set2 a:first-child i {
	-webkit-transform: translate3d(-60px, 60px, 0);
	transform: translate3d(-60px, 60px, 0);
}
.set2 a:nth-child(2) i {
	-webkit-transform: translate3d(60px, 60px, 0);
	transform: translate3d(60px, 60px, 0);
}
.hovereffect-2:hover hr:nth-child(3) {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -90deg) scale3d(1, 1, 1);
	transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -90deg) scale3d(1, 1, 1);
}
.hovereffect-2:hover hr:nth-child(4) {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -180deg) scale3d(1, 1, 1);
	transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -180deg) scale3d(1, 1, 1);
}
.hovereffect-2:hover .set1 i:empty, .hovereffect-2:hover .set2 i:empty {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
	filter: alpha(opacity=100);
}

Szybkie przybliżenie i przyciemnienie

HTML

<div class="hovereffect-3">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Szybkie przybliżenie i przyciemnienie</h2><a class="info" href="#">Link</a>
	</div>
</div>

CSS

.hovereffect-3 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.hovereffect-3 .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	background-color: rgba(0, 0, 0, 0.5);
	-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-3 img {
	display: block;
	position: relative;
	-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-3 h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 17px;
	background: rgba(0, 0, 0, 0.6);
	-webkit-transform: translatey(-100px);
	-ms-transform: translatey(-100px);
	transform: translatey(-100px);
	-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);
	padding: 10px;
}
.hovereffect-3 a.info {
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	background-color: transparent;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 7px 14px;
}
.hovereffect-3 a.info:hover {
	box-shadow: 0 0 5px #fff;
}
.hovereffect-3:hover img {
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
.hovereffect-3:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
}
.hovereffect-3:hover h2 {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-transform: translatey(0);
	-webkit-transform: translatey(0);
	transform: translatey(0);
}
.hovereffect-3:hover a.info {
	opacity: 1;
	filter: alpha(opacity=100);
}
.hovereffect-3:hover a.info {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}

Przesunięcie

HTML

<div class="hovereffect-4">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Przesunięcie</h2>
		<p><a href="#">Link</a></p>
	</div>
</div>

CSS

.hovereffect-4 {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #42b078;
}

.hovereffect-4 .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 50px 20px;
}

.hovereffect-4 img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect-4:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect-4 h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  overflow: hidden;
  padding-bottom: 2em;
  background-color: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
}

.hovereffect-4 p {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hovereffect-4 h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

.hovereffect-4:hover h2:after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect-4 a, .hovereffect-4 p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

.hovereffect-4:hover a, .hovereffect-4:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
}

Wysuwane dolne menu

HTML

<div class="hovereffect-5">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Wysuwane dolne menu</h2>
		<p class="icon-links"><a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-instagram"></span></a></p>
	</div>
</div>

CSS

.hovereffect-5 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.hovereffect-5 .overlay {
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 4.75em;
	background: #79FAC4;
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.hovereffect-5 img {
	display: block;
	position: relative;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}
.hovereffect-5:hover img {
	-webkit-transform: translate3d(0, -10%, 0);
	transform: translate3d(0, -10%, 0);
}
.hovereffect-5 h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 17px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.6);
	float: left;
	margin: 0px;
	display: inline-block;
}
.hovereffect-5 a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	margin: 50px 0 0 0;
	background-color: transparent;
}
.hovereffect-5 a.info:hover {
	box-shadow: 0 0 5px #fff;
}
.hovereffect-5 p.icon-links a {
	float: right;
	color: #3c4a50;
	font-size: 1.4em;
}
.hovereffect-5:hover p.icon-links a:hover, .hovereffect-5:hover p.icon-links a:focus {
	color: #252d31;
}
.hovereffect-5 h2, .hovereffect-5 p.icon-links a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0, 200%, 0);
	transform: translate3d(0, 200%, 0);
}
.hovereffect-5 p.icon-links a span:before {
	display: inline-block;
	padding: 8px 10px;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.hovereffect-5:hover .overlay, .hovereffect-5:hover h2, .hovereffect-5:hover p.icon-links a {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.hovereffect-5:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}
.hovereffect-5:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.hovereffect-5:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
.hovereffect-5:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

Przesunięcie i nakładka

HTML

<div class="hovereffect-6">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Przesunięcie i nakładka</h2>
		<p><a href="#">Link</a></p>
	</div>
</div>

CSS

.hovereffect-6 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
	background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
}
.hovereffect-6 .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	padding: 3em;
	text-align: left;
}
.hovereffect-6 img {
	display: block;
	position: relative;
	max-width: none;
	width: calc(100% + 60px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
	transition: opacity 0.35s, transform 0.45s;
	-webkit-transform: translate3d(-40px, 0, 0);
	transform: translate3d(-40px, 0, 0);
}
.hovereffect-6 h2 {
	text-transform: uppercase;
	color: #fff;
	font-size: 17px;
	background-color: transparent;
	text-align: left;
	position: absolute;
	top: 50%;
	transform: translate(0%, -50%);
}
.hovereffect-6 p {
	position: absolute;
	top: 54%;
	transform: translate(0%, -50%);
}
.hovereffect-6 .overlay:before {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border: 1px solid #fff;
	content: '';
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
	transition: opacity 0.35s, transform 0.45s;
	-webkit-transform: translate3d(-20px, 0, 0);
	transform: translate3d(-20px, 0, 0);
}
.hovereffect-6 a, .hovereffect-6 p {
	color: #FFF;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
	transition: opacity 0.35s, transform 0.45s;
	-webkit-transform: translate3d(-10px, 0, 0);
	transform: translate3d(-10px, 0, 0);
}
.hovereffect-6:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.hovereffect-6:hover .overlay:before, .hovereffect-6:hover a, .hovereffect-6:hover p {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

Poziome linie

HTML

<div class="hovereffect-7">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Poziome linie</h2>
		<p><a href="#">Link</a></p>
	</div>
</div>

CSS

.hovereffect-7 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.hovereffect-7 .overlay {
	position: absolute;
	overflow: hidden;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
	border-bottom: 1px solid #FFF;
	border-top: 1px solid #FFF;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
}
.hovereffect-7:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.hovereffect-7 img {
	display: block;
	position: relative;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
}
.hovereffect-7:hover img {
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
	filter: brightness(0.6);
	-webkit-filter: brightness(0.6);
}
.hovereffect-7 h2 {
	text-transform: uppercase;
	text-align: center;
	position: relative;
	font-size: 17px;
	background-color: transparent;
	color: #FFF;
	padding: 1em 0;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hovereffect-7 a {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hovereffect-7 a, .hovereffect-7 p {
	color: #FFF;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}
.hovereffect-7:hover a, .hovereffect-7:hover p, .hovereffect-7:hover h2 {
	opacity: 1;
	filter: alpha(opacity=100);
}

Prostokąt

HTML

<div class="hovereffect-8">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Prostokąt</h2><a class="info" href="#">Link</a>
	</div>
</div>

CSS

.hovereffect-8 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.hovereffect-8 .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	background-color: rgba(75, 75, 75, 0.7);
	-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-8:hover .overlay {
	background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect-8 img {
	display: block;
	position: relative;
}
.hovereffect-8 h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 17px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.6);
	-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-8:hover h2 {
	-webkit-transform: translateY(5px);
	-ms-transform: translateY(5px);
	transform: translateY(5px);
}
.hovereffect-8 a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	background-color: transparent;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(0) translate(-50%, -50%);
	-ms-transform: scale(0) translate(-50%, -50%);
	transform: scale(0) translate(-50%, -50%);
	-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);
	font-weight: normal;
	padding: 62px 100px;
	position: absolute;
	top: 50%;
	left: 50%;
}
.hovereffect-8:hover a.info {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1) translate(-50%, -50%);
	-ms-transform: scale(1) translate(-50%, -50%);
	transform: scale(1) translate(-50%, -50%);
}
.hovereffect-8 a.info:hover {
	box-shadow: 0 0 5px #fff;
}

Czarno-biały blur

HTML

<div class="hovereffect-9">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Czarno-biały blur</h2><a class="info" href="#">Link</a>
	</div>
</div>

CSS

.hovereffect-9 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.hovereffect-9 .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.hovereffect-9 img {
	display: block;
	position: relative;
	-webkit-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
}
.hovereffect-9:hover img {
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
	filter: grayscale(1) blur(3px);
	-webkit-filter: grayscale(1) blur(3px);
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}
.hovereffect-9 h2 {
	text-transform: uppercase;
	text-align: center;
	position: relative;
	font-size: 17px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.6);
}
.hovereffect-9 a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	border: 1px solid #fff;
	margin: 50px 0 0 0;
	background-color: transparent;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hovereffect-9 a.info:hover {
	box-shadow: 0 0 5px #fff;
}
.hovereffect-9 a.info {
	-webkit-transform: scale(0.7) translate(-50%, -50%);
	-ms-transform: scale(0.7) translate(-50%, -50%);
	transform: scale(0.7) translate(-50%, -50%);
	-webkit-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	opacity: 0;
	filter: alpha(opacity=0);
	color: #fff;
	text-transform: uppercase;
}
.hovereffect-9 h2 {
	-webkit-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	-webkit-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	opacity: 0;
	filter: alpha(opacity=0);
	color: #fff;
	text-transform: uppercase;
}
.hovereffect-9:hover a.info {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1) translate(-50%, -50%);
	-ms-transform: scale(1) translate(-50%, -50%);
	transform: scale(1) translate(-50%, -50%);
}
.hovereffect-9:hover h2 {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

Linki do social media 2

HTML

<div class="hovereffect-10">
	<img alt="" class="img-responsive" src="http://devcorner.pl/wp-content/uploads/2016/11/do-podmiany.jpg">
	<div class="overlay">
		<h2>Linki do social media 2</h2>
		<p><a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-dribbble"></i></a></p>
	</div>
</div>

CSS

.hovereffect-10 {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}
.hovereffect-10 .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.hovereffect-10 img {
	display: block;
	position: relative;
}
.hovereffect-10 h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	font-size: 17px;
}
.hovereffect-10:hover h2 {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
	transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
}
.hovereffect-10 a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	margin: 50px 0 0 0;
	background-color: transparent;
}
.hovereffect-10 a.info:hover {
	box-shadow: 0 0 5px #fff;
}
.hovereffect-10 h2, .hovereffect-10 p {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	-webkit-transform-origin: 50%;
	-ms-transform-origin: 50%;
	transform-origin: 50%;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
}
.hovereffect-10 .overlay:before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 25%;
	height: 60%;
	border: 2px solid #fff;
	content: '';
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1);
	transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1);
	-webkit-transform-origin: 50%;
	-ms-transform-origin: 50%;
	transform-origin: 50%;
}
.hovereffect-10 p {
	width: 20%;
	text-transform: none;
	font-size: 15px;
	line-height: 2;
}
.hovereffect-10 p a {
	color: #fff;
}
.hovereffect-10 p a:hover, .hovereffect-10 p a:focus {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.hovereffect-10 a i {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	padding: 0px 5px;
}
.hovereffect-10 p a:first-child i {
	-webkit-transform: translate3d(-60px, -60px, 0);
	transform: translate3d(-60px, -60px, 0);
}
.hovereffect-10 p a:nth-child(2) i {
	-webkit-transform: translate3d(60px, -60px, 0);
	transform: translate3d(60px, -60px, 0);
}
.hovereffect-10 p a:nth-child(3) i {
	-webkit-transform: translate3d(-60px, 60px, 0);
	transform: translate3d(-60px, 60px, 0);
}
.hovereffect-10 p a:nth-child(4) i {
	-webkit-transform: translate3d(60px, 60px, 0);
	transform: translate3d(60px, 60px, 0);
}
.hovereffect-10:hover .overlay:before {
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: rgba(0, 0, 0, 0.2);
	-webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -135deg) scale3d(1, 1, 1);
	transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -135deg) scale3d(1, 1, 1);
}
.hovereffect-10:hover p i:empty {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
	filter: alpha(opacity=100);
}