Slide Up Text mit Button

by | 17. Feb. 2020

Titel 1

Your content goes here and here a little bit more.

lesen

Titel 1

Your content goes here and here a little bit more.

lesen

Titel 1

Your content goes here and here a little bit more.

lesen

Titel 1

Your content goes here and here a little bit more.

lesen


.img-hover-btn {
	overflow:hidden;
	min-height:330px;
	border:3px solid #fff;
	}

.img-hover-btn .et_pb_image{
	transform:scale(1.2);
	}

.img-hover-btn .et_pb_text {
	position: absolute;
	z-index: 2;
	padding:15px;
	cursor:pointer;
	transition: 0.2s ease-in-out;
	bottom:-45px;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
	}

.img-hover-btn:hover .et_pb_text {
	bottom:0;
	}

.img-hover-btn .btn-sm {
	background:#000;
	color:#fff;
	padding:6px 15px;
	transition: 0.2s ease-in-out;
	}

.img-hover-btn .btn-sm:hover {
	background:#fff;
	color:#000;
	}
Bilder mit Text Hover

Bilder mit Text Hover

by | 19. Apr. 2019

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Mein Titel

Mein kleiner Zusatztext etwas länger

Mein Titel

Mein kleiner Zusatztext etwas länger einen noch längeren Text

Mein Titel

Mein kleiner 

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Einstellungen:

Gehe in die Zeileneinstellungen und füge bei «Fortgeschritten» folgende Klasse ein:
bh_hover_overlay

Den CSS Code kannst Du in Dein style.css des Child-Themes einfügen oder unter Divi Optionen, ganz runter scrollen bis zum CSS Feld. 


.bh_hover_overlay .et_pb_text {
  opacity:0;
  transition: .4s ease-in-out;
}

.bh_hover_overlay .et_pb_text:hover {
  opacity:1;
  background:rgba(90,68,255,0.9);
  cursor: pointer;
}