Slide Up Text mit Button

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

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;
}

Wie style ich Titel in Divi mit CSS

|| h1
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.


body .et_pb_module h1 {
  font-size:3.6rem;
  line-height:3.9rem;
  font-weight:900;
}

|| h2
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

 


body .et_pb_module h2 {
  font-size:3rem;
  line-height:3.2rem;
  font-weight:600;
}

|| h3
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.


body .et_pb_module h3 {
  font-size:2.8rem;
  line-height:3rem;
  font-weight:200;
}

|| h4
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.


body .et_pb_module h4 {
  font-size:2.2rem;
  line-height:2.5rem;
}
|| h5
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

body .et_pb_module h5 {
  font-size:1.9rem;
  line-height:2.3rem;
  font-weight:200;
}
|| h6
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

body .et_pb_module h6 {
  font-size:1.6rem;
 line-height:1.8rem;
 font-weight:900;
}

Ich bin ein Verlauf im Text


.verlauf h1 {
   background: -webkit-linear-gradient(left, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
   display:inline;
}