Hover03/17-3

frau — Überschrift H3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

WEITER

mann — Überschrift H3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

WEITER

Da das Grid-System von Zeta Producer die Bilder auf kleinen Bildschirmen abschneidet bevor sie umgebrochen werden kümmert sich hierum die zusätzliche CSS-Klasse: cont. Diese müsst ihr an eure Seitenbreite anpassen. Ihr findet die entsprechenden Werte ganz am Anfang sowie ganz am Ende des CSS.

Da die Bilder am Smartphone abgeschnitten werden verkleinern wir diese für kleine Bildschirme und passen auch hierfür Schriftgrößen und Abstände an. Diese Einträge findet ihr ganz am Ende des CSS.

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

figure {
   float: left;
	margin: 10px;
	padding: 0;
	width: 445px;
	height: 297px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 250px;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;
	-webkit-transition-delay: .4s;
	-moz-transition-delay: .4s;
	-o-transition-delay: .4s;
	-ms-transition-delay: .4s;
	transition-delay: .4s;
}

figcaption h3 {
	text-align: center;
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 27px;
	font-size: 30px;
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;
}

figcaption p {
	text-align: center;
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 10px;
	position: relative;
	left: 100%;
	font-size: 16px;
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

@media (max-width: 969px) {
.cont {
   width: 460px;
}}

@media (max-width: 506px) {
.cont {
   width: 300px;
}
figure {
	width: 280px;
	height: 187px;
}
figcaption h3 {
	padding: 0 10px;
	margin-top: 10px;
	font-size: 20px;
}
figcaption p {
	padding: 8px 10px;
	margin-top: 0;
	font-size: 14px;
}}
</style>

Quellcode markieren & kopieren

Quellcode

Diesen Code per Widget > Quelltext einfügen und anpassen

Quellcode markieren & kopieren

Hover03/17-3

Überschrift H3

Überschrift H3

CSS-Code

Quellcode

NEUE BEITRÄGE